作用：
根据表达式的布尔值(true/false)进行判断是否渲染该元素
v-if / v-else / v-else-if
上述三个指令是分支中最常见的。根据需求，v-if可以单独使用，也可以配合v-else一起使用，也可以配合v-else-if和v-else一起使用。
v-show
v-show是根据表达式之真假值，切换元素的 display CSS属性（是根据表达式的布尔值来判断是否显示该元素）。
v-if系列与v-show的区别
v-if：控制元素是否渲染
v-show：控制元素是否显示（已经渲染，display:none;）
v-if系列指令、v-show指令可以与v-for指令结合起来使用（循环+分支）。
<body>
<div id="app">
<!-- if系列 -->
<div v-if="age <= 12">
<!-- <= 12，儿童 -->
儿童
</div>
<div v-else-if="age > 12 && age < 18">
<!-- > 12 && < 18，少年 -->
少年
</div>
<div v-else-if="age >= 18 && age < 30">
<!-- >= 18 && < 30，青年 -->
青年
</div>
<div v-else>
<!-- >= 30 老年 -->
老年
</div>
<!-- v-show -->
<div v-show="flag">测试v-show</div>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
age: 32,
flag: false,
},
});
</script>
Comments | NOTHING