控制元素显示隐藏
本节讲解 v-if 和 v-show 指令的用法，这两个指令的作用是控制元素的显示和隐藏。
v-if和v-show指令
案例1：新建 div 元素，使用 v-if 和 v-show 控制元素的显示和隐藏，代码如下。
M 层代码如下。
<script>
var vm = new Vue({
el: '#app',
data: {
// 定义 flag
// true 为显示，false 为隐藏
flag: true
}
});
</script>视图层代码如下。
<div id="app" v-cloak>
<div v-if="flag">
<h1>v-if 的使用</h1>
</div>
<div v-show="flag">
<h1>v-show 的使用</h1>
</div>
</div>代码解析如下。
v-if 和 v-show 都可以控制元素的显示和隐藏，当值为 true 时元素显示，当值为 false 时元素隐藏。
v-if 和 v-show 的区别：v-if 是直接删除或者创建元素，控制元素的显示和隐藏；v-show 是使用 display 样式控制元素的显示和隐藏。
案例2：单击按钮控制 div 的显示和隐藏。
视图层代码如下。
<div id="app" v-cloak>
<input type="button" value="单击" @click="toggle">
<div v-if="flag">
<h1>v-if 的使用</h1>
</div>
<div v-show="flag">
<h1>v-show 的使用</h1>
</div>
</div>M 层代码如下。
<script>
var vm = new Vue({
el: '#app',
data: {
flag: true
},
methods: {
toggle() {
this.flag = !this.flag;
}
}
});
</script>上述代码只做了一件事情，即单击按钮触发 toggle 事件，在 toggle 事件中让 flag 取反，最终实现单击按钮控制 div 元素的显示和隐藏。
v-if 和 v-else 的使用与原生 JS 的用法类似，代码如下。
视图层代码如下。
<div id="app" v-cloak>
<div v-if="type == 'A'">A</div>
<div v-else-if="type == 'B'">B</div>
<div v-else>HELLO</div>
</div>M 层代码如下。
<script>
var vm = new Vue({
el: '#app',
data: {
type: 'A'
}
});
</script>代码解析如下。
上述代码中，判断 type 值，如果 type 值为 A 则执行 v-if，如果 type 值为 B 则执行 v-else-if，如果 type 值为其他字母则会执行 v-else。
v-if实现选项卡案例
本节将实现两个功能。
-
实现单击菜单切换 div 盒子。
-
实现菜单排他功能。
视图层代码如下。
<div id="app" v-cloak>
<div>
<span
:class="{ redColor: active == 0 }"
@click="btn(0)"
>
vue.js
</span>
<span
:class="{ redColor: active == 1 }"
@click="btn(1)"
>
node.js
</span>
</div>
<div v-if="active == 0">
vue 内容
</div>
<div v-if="active == 1">
node 内容
</div>
</div>业务逻辑代码如下。
<script>
var vm = new Vue({
el: '#app',
data: {
active: 0
},
methods: {
btn(i) {
this.active = i;
}
}
});
</script>代码解析如下。
菜单排他功能在前文做过一次，使用绑定 class 属性的形式，单击菜单触发 btn 方法，并进行参数传递。
在 btn 方法中，把 active 的值修改成用户所传递的值。
在 v-if 中只需要把 active 的值和菜单中 active 的值设置为相同即可。