學習要點：
1.條件顯示指令
本節課我們來開始學習 Vue3.x 的條件判斷渲染 v-if 的使用方式。
一．條件顯示指令
1. 先復習一下前面課程中 v-if 指令的簡單用法：通過布爾屬性隱藏或顯示：
<div v-if="flag">我是否顯示div>
data() {
return {
flag : true
}
},
2. 當然，也支持 v-else 的條件判斷，具體如下：
<div v-if="flag">我是否顯示div>
<div v-else>404div>
PS：如果布爾值為 false，則顯示 404；
3. 如果有多個分支判斷的話，支持加入 v-else-if 的判斷比較，具體如下：
<div v-if="type === 'A'">Adiv>
<div v-else-if="type === 'B'">Bdiv>
<div v-else-if="type === 'C'">Cdiv>
<div v-else>404div>
PS：屬性里設置 type : 'B'，最后顯示 B；
4. 如果條件判斷的區域是一大段代碼，我們可以使用來整合多個元素；
<template v-if="flag">
<h2>標題h2>
<h4>小標題h4>
<div>內容.....div>
template>
5. 如果只是簡單的切換顯示或隱藏，可以使用 v-show，但不支持 else 和 template；
<div v-show="flag">showdiv>
PS：v-if 是條件渲染，惰性的，適時的銷毀和重建渲染的內容；
PS：v-show，就是 display 的隱藏顯示切換；結論：時時頻繁切換用 v-show，反之 v-if；
本文由:蘭州啟點網絡（
www.syzhibo.net)整理發布!
啟點CMS演示地址及賬號
