Vue常见指令
一、v-if和v-show及其区别
v-if 和 v-show 都是条件渲染指令。
区别:
1、v-if 是根据表达式的真假来删除和插入元素,通俗来讲就是表达式为false则元素不渲染,为true则渲染。
2、v-show不管条件是否成立,都会渲染元素,条件为true则渲染元素,为false则为该元素添加display:none。
<div id="app">
<div v-if="isMale">v-if</div>
<div v-show="isMale">v-show</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isMale:false
}
})
</script>
二、v-for
v-for:基于一个数组渲染一个列表
语法:v-for="(item,index)in list" 其中index为可选参数 表示索引
<div id="app">
<table >
<tr class="thead">
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr v-for="(item,index) in list">
<td v-text="index+1"></td>
<td v-text="item.name"></td>
<td v-text="item.age"></td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list:[{
name:'张三',
age:18
},{
name:'李四',
age:20
}]
}
})
</script>
三、v-bind
1、v-bind动态地绑定一个或多个特性,可以在其名称后面带一个参数,中间放一个冒号隔开。
2、class可以和v-bind:class同时存在 ,也就是说有class了,再添加v-bind:class并不会覆盖原来的样式类,而是在原来基础上添加新的类名。
3、v-bind 可以简写成冒号( : )
语法: v-bind:属性名 = "值" <=> :属性名 = "值"
四、v-model
v-model:在表单控件元素上创建双向数据绑定
语法: v-model = "变量名"
<div id="app">
<input type="text" v-model = "name">
<div v-text="name"></div>
<!-- 当输入框内容改变时 div里的内容也会跟着改变 -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name:"张三"
}
})
</script>
五、v-on
v-on:为DOM元素添加事件,用法和v-bind类似,例如给button添加点击事件
v-on 可以简写为 @
语法:v-on:click = "now()" <=> @click = "now()" 其中 now 为事件触发是执行的方法函数
<div id="app">
<!-- 当点击按钮时弹出 你好 -->
<!-- @click 为button绑定点击事件 -->
<!-- alert() 为弹窗函数 -->
<button @click = "alert('你好')">点击</button>
</div>