8个常用的Vue指令

8个常用的Vue指令

v-text

设置标签的文本值

<div id="app">
<h2 v-text="message">h2>

<h2 v-text="message">学习h2>
<h2 v-text="message+'!!!'">h2>
<h2>{{message}}学习h2>
<h2>{{message+"!!!"}}h2>
div>


var vue = new Vue({
el:"#app",
data:{
message:"Vue"
}
})


v-html

设置标签的innerHTML

<div id="app">
<p v-html="content">p>
div>


var vue = new Vue({
el:"#app",
data:{
content:"内容"
}
})


v-show

根据表达式的真假，切换元素的显示与隐藏

<div id="app">
<h2 v-show="isShow">隐藏h2>

<h2 v-show="!isShow">显示h2>
<h2 v-show="age>=18">age>=18显示h2>
div>


var vue = new Vue({
el:"#app",
data:{
isShow:false,
age:18
}
})


v-if

根据表达式的真假，切换元素的显示与隐藏

<div id="app">
<h2 v-if="isShow">隐藏h2>
<h2 v-if="true">显示h2>
<h2 v-if="!isShow">表达式显示h2>
div>


var vue = new Vue({
el:"#app",
data:{
isShow:false
}
})


v-if本质是通过操作dom元素来切换显示隐藏状态

v-show本质是基于CSS的display属性来切换显示隐藏状态

频繁的切换用v-show，反之使用v-if，因为前者的切换消耗小

v-bind

设置元素的属性（比如：src，title，class）

用法是v-bind:属性名，如v-bind:src=" "，也可以简写，省略v-bind，写成:src=" "

<div id="app">
<img v-bind:src="imgSrc" >
<h2 v-bind:title="tt">标题h2>

<h2 v-bind:title="tt+'!!!'">标题h2>
<img v-bind:border="bd" src="../imgs/computer.png">
<img v-bind:border="bd==2?5:0" src="../imgs/computer.png">

<img :border="bd" :src="imgSrc">
div>


var vue = new Vue({
el:"#app",
data:{
imgSrc:"../imgs/computer.png",
tt:"这是一个标题",
bd:2
}
})


v-for

根据数据生成列表结构

数组经常和v-for使用，语法是(item,index) in 数据名，item和index可以结合其他指令一起使用；数组长度的更新会同步到页面上，是响应式的。

<div id="app">
<ul>
<li v-for="n in arr">{{n}}li>
<li v-for="obj in objArr">{{obj.name}}li>

<li v-for="(obj,index) in objArr">{{index}}--{{obj.name}}li>
ul>
div>


var vue = new Vue({
el:"#app",
data:{
arr:[1,2,3],
objArr:[
{name:"jack"},
{name:"rose"}
]
}
})


v-on

为元素绑定事件

<div id="app">
<input type="button" value="单击事件绑定" v-on:click="event"/>
<input type="button" value="鼠标指向事件绑定" v-on:mouseenter="event"/>
<input type="button" value="双击事件绑定" v-on:dblclick="event"/>

<input type="button" value="双击事件绑定" @dblclick="event"/><br>


<input type="text" @keyup.enter="event">
div>


var vue = new Vue({
el:"#app",
methods:{
event:function(){
alert("事件");
}
}
})


v-model

获取和设置表单元素的值（双向数据绑定）

<div id="app">
<input type="text" v-model="message">

<h2>{{message}}h2>
div>


var vue = new Vue({
el:"#app",
data:{
message:"双向数据绑定"
}
})