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>