本节我们学习 Vue 中的条件渲染，使用条件渲染，我们可以通过条件判断的方式，来决定是否渲染指定的数据。
v-if 指令的使用
在 Vue 中，v-if 指令可以用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
示例：
例如下面这段代码中，有姓名和年龄这两条信息，现要求只显示姓名，而隐藏年龄：
<div id="app">
<p v-if="show">显示姓名：小飞侠</p>
<p v-if="hide">隐藏年龄：28</p>
</div>const app = Vue.createApp({
data() {
return {
show:true,
hide:false
}
}
}).mount('#app')在浏览器中看一下效果：
我们可以看到在浏览器中关于年龄的信息被成功隐藏，这是因为我们分别在两条信息上使用 v-if 指令绑定了两个属性，属性 show 的值为 true，属性 hide 的值为 false 。内容只有当 v-if 指令的表达式返回真值的时候才会被渲染，所以第二条信息被成功隐藏。
v-else指令
v-if 指令就类似 JavaScript 中的 if 语句，而 if 语句有与之匹配的 else 语句，v-if 指令也有与之匹配的 v-else 指令。
示例：
例如下面这段代码中：
<div id="app">
<p v-if="3>1">显示</p>
<p v-else>隐藏</p>
</div>v-if 指令的表达式值为真，所以内容会被渲染，而与之对应的 v-else 指令中的内容则不会被渲染。反之如果v-if指令表达式值为假，则会渲染 v-else 指令中的内容。
注意： v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if指令
v-else-if 指令是在 2.1.0 新增的一个指令，相当于 JavaScript 中的 else-if 语句，可以同时使用多个 v-else-if 指令。
示例：
<div id="app">
<p v-if="name=='Mark'">我是Mark</p>
<p v-else-if="name=='Tom'">我是Tom</p>
<p v-else-if="name=='xkd'">我是xkd</p>
<p v-else>猜猜我是谁？</p>
</div>类似于 v-else，v-else-if 指令必须紧跟在 v-if 指令之后，v-else 指令之前。
v-show指令
还有一个指令也可以根据条件展示元素的选项，也就是 v-show 指令。
示例：
<h1 v-show="show">侠课岛欢迎你！</h1>带有 v-show 指令的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
v-if和v-show对比
v-if 指令和 v-show 指令都是通过条件来渲染元素内容，但是它们还是有区别的。
v-if是惰性的，如果v-if的表达式结果不是true的话，对应的元素是不会被渲染出来的，一直到表达式的结果第一次为true的时候，才会去渲染。v-show不管表达式的结果如何，都会渲染出来，表达式的结果只是用来判断是否通过css来切换元素的隐藏和显示。- 一般来说v-if 有更高的切换开销，而
v-show有更高的初始渲染开销。因为如果在运行时条件不太可能改变则使用v-if较好。如果需要非常频繁地切换，则使用v-show较好。
提示： 当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级。但是不推荐同时使用 v-if 和 v-for。
