条件渲染
作用：根据不同的条件选择不同的内容渲染
语法：v-if、v-else-if、v-else、v-show
<body>
<div id="app">
<p v-if="num > 5">库存充⾜，还有{{num}}个帽⼦</p>
<p v-else-if="num > 1">所剩不多，欲购从速</p>
<p v-else>等下⼀批货吧</p>
<button @click="num--;go=!go">卖出⼀个</button>
<p>下⾬了到底要不要摆摊？</p>
<p v-show="go">去</p>
<p v-show="!go">算了吧</p>
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
num: 8,
go: true
}
},
}).mount("#app")
</script>
</body>
v-if与v-show的区别：
v-if 判断是只保留符合条件的标签，把不符合条件的删除掉，⽽ v-show 把不符合条件的设 置display：none。
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和⼦组件适当地被销 毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第⼀次变为真时，才会 开始渲染条件块。 相⽐之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基 于 CSS 进⾏切换。 ⼀般来说， v-if 有更⾼的切换开销，⽽ v-show 有更⾼的初始渲染开销。因此，如果需要⾮常频 繁地切换，则使⽤ v-show 较好；如果在运⾏时条件很少改变，则使⽤ v-if 较好
