目录
1.v-if
2.v-else
3.v-else-if
4.v-show
5.v-if 和 v-show 比较
1.v-if
作用：条件性的渲染一块内容，这块内容只会在指令的表达式为真值时被渲染。
<div id="app"><div v-if=true>姓名：{{ stu1.name }}</div> //渲染<div v-if=false>年龄：{{ stu1.age }}</div> //不渲染<div>姓名：{{ stu2.name }}</div><div>年龄：{{ stu1.age }}</div></div>
const vm = new Vue({el: '#app',data: {stu1: {name: "JWH",age: 18},stu2: {name: "DQS",age: 18}}})
【结果】stu1.age不渲染
【注】若想切换多个元素，则可以将其包裹在不可见元素 <template> 中，并在 <template> 元素上使用 v-if ，如下例：
<template v-if=true><div>姓名：{{ stu1.name }}</div><div>年龄：{{ stu1.age }}</div></template><template v-if=false><div>姓名：{{ stu2.name }}</div><div>年龄：{{ stu2.age }}</div></template>
【结果】
2.v-else
作用：为 v-if 或者 v-esle-if 添加 else 块，其前一兄弟元素必须有 v-if 或 v-else-if，举个例子
<template v-if=false><div>姓名：{{ stu1.name }}</div><div>年龄：{{ stu1.age }}</div></template><template v-else><div>姓名：{{ stu2.name }}</div><div>年龄：{{ stu2.age }}</div></template>
【结果】
3.v-else-if
作用：为 v-if 添加 else if 块，可以链式调用，前一兄弟元素必须有 v-if 或 v-else-if
<div id="app"><div v-if="chose.A">{{ stu1.name }}</div><div v-else-if="chose.B">{{ stu2.name }}</div><div v-else="choseC.">{{ stu2.age }}</div></div>
const vm = new Vue({el: '#app',data: {stu1: {name: "JWH",age: 18},stu2: {name: "DQS",age: 18},chose:{A:false,B:true,C:true}}})
【结果】
4.v-show
作用：根据表达式之真价值，切换元素的 display CSS 属性，举个栗子
<div v-show=2>你就是最好的</div><div v-show=0>You are the best</div>
【结果】可以看到第二行代码的 display 属性值为 none
