1. v-show指令
切换元素的显示状态
// 源码： <body> <div id="app"> <button @click="changeisShow">切换显示</button> <img src="images/13.jpg" v-show="isShow"> </div> <script> var app = new Vue({ el: "#app", data: { isShow: true, }, methods: { changeisShow: function () { this.isShow = !this.isShow; } } }) </script> </body>
总结：
- v-show指令的作用是：根据真假切换元素的显示状态
- 原理是修改元素的display，显示隐藏，从下面的gif图中可以看出
- 指令后面的内容，最终都会解析为布尔值
- 值为true元素显示，值为false元素隐藏
- 数据改变之后，对应元素的显示状态会同步更新
2.v-if指令
根据表达式的真假，切换元素的显示与隐藏（操作DOM元素）
语法：
<div id="app"> <p v-if="true">我是p1标签</p> <p v-if="isShow">我是p2标签</p> <p v-if="表达式">我是p3标签</p> </div>
var app = new Vue({ el: "#app", data: { isShow: false, } })
从上面的gif图中我们可以发现v-if指令操作的是DOM树，操作DOM对性能消耗比较大，而v-show指令并没有操作DOM。
总结：
v-if指令的作用是：根据表达式的真假切换元素的显示状态。
本质是通过操作DOM元素来切换显示状态。
表达式的值为true，元素存在DOM树中，值为false，从DOM树中移除。
频繁的切换使用v-show，反之使用v-if,前者的切换消耗小。
3.v-bind指令
设置元素的属性（比如src，title，class）
语法：
<div id="app"> <img v-bind:src="imgSrc"> <p v-bind:class="isActive?'active':''"></p> <!-- 该三元表达式写法较复杂 --> <p v-bind:class="{active:isActive}"></p> </div>
var app =new Vue({ el:"#app", data:{ imgSrc:"图片地址", isActive:false } })
总结：
- v-bind指令的作用是：为元素绑定属性。
- 完整写法是v-bind：属性名。
- 简写的话可以直接省略v-bind，只保留:属性名。
- 需要动态的增删class建议使用对象的方式。
4.图片切换案例
// 源码： <body> <div id="app"> <h2>校园食堂</h2> <img :src="imgArr[index]" alt=""> <a href="#" class="prev" @click="clickPrev" v-show="index!=0"></a> <a href="#" class="next" @click=clickNext v-show="index<imgArr.length-1"> </a> </div> <script> var app = new Vue({ el: "#app", data: { imgArr: [ "images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg", "images/7.jpg", "images/8.jpg", "images/9.jpg", "images/10.jpg" ], index: 0 }, methods: { clickPrev: function () { this.index-- }, clickNext: function () { this.index++ } } }) </script> </body>
总结：
- 列表数据使用数组保存
- v-bind指令可以设置元素属性，比如src
- v-show和v-if都可以切换元素的显示状态，频繁切换用v-show。
