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。
