這章要介紹的是條件式渲染，說到條件式理所當然想到的就是 if else。
我想對 JS 有一定了解的各位應該很清楚 if else 如何運作以及如何使用，下面來介紹一下 Vue 的條件式怎麼寫囉～
上面提到這章是要介紹條件是渲染，所以應該很好理解 v-if 就是在指定的條件成立時才會渲染出來。
以下就來實際練習一下：
我們先寫一個 checkbox 綁定 data 的 checked，checked 的行為是在點選打勾時會是 true 反之為 false，然後我們再一張圖片上寫上 v-if 判斷 checked 是否為 true，所以在 checkbox 被點擊打勾時圖片才會渲染出來。
<body>
<div id="app">
<input type="checkbox" v-model="checked"><br>
<img v-if="checked" src="皮卡丘0.jpg" alt="">
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
checked: false
}
})
</script>
結果如下：
至於 v-else 的部分也很好理解，就是 v-if 條件不成立時則顯示 v-else 所標記的元素，話不多說就直接拿上面的來練習唄：
我們再多一個圖片加上 v-else，在 v-if 不成立時顯示。
<body>
<div id="app">
<input type="checkbox" v-model="checked"><br>
<img v-if="checked" src="皮卡丘0.jpg" alt="">
<img v-else src="皮卡丘1.jpg" alt="">
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
checked: false
}
})
</script>
結果如下：
但是有一點要特別注意，v-else 必須接在 v-if 的後面，如果中間有其他元素實則 v-else 會沒辦法運作，下面直接來看一下示範：
<body>
<div id="app">
<input type="checkbox" v-model="checked"><br>
<img v-if="checked" src="皮卡丘0.jpg" alt="">
<p>我就是來擋路的～</p> // 中間多了這個擋路仔
<img v-else src="皮卡丘1.jpg" alt="">
</div>
</body>
第二張圖片就沒辦法如預期顯示～
好的，v-else-if 就是使用在如果渲染條件有多數個的時候使用，那這部分就不另外演示，直接上程式碼了：
<body>
<div id="app">
<input type="number" v-model="number"><br>
<img v-if="number % 3 === 1" src="皮卡丘0.jpg" alt="">
<img v-else-if="number % 3 === 2" src="皮卡丘1.jpg" alt="">
<img v-else src="皮卡丘2.jpg" alt="">
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
number: 0
}
})
</script>
跟 v-else 一樣必須接在 v-if 後面，中間不能夠有其他元素，不然就會失效。
另外在 Vue 裡面還有一個比較特殊的就是 v-show，他其實跟 v-if 很類似，都是在條件成立時才會顯示。
但是 2 個語法不一樣的地方有 3 個：
v-if 是在條件成立時才會將元素建立，條件不成立時會將該元素拿掉，而 v-show 是在條件成立時顯示元素，條件不成立時就將該元素 display: none。
v-if 條件後面還能夠附加多個條件(v-else-if)及其他條件(v-else)，但 v-show 沒辦法使用 v-else-if 及 v-else。
v-if 能夠使用在 <template> 上，v-show 沒辦法使用，因為 template 實際是不存在的，所以沒辦法 display: none。
以上就是條件渲染的介紹，接下來再下一章介紹囉～
iThome鐵人賽
看影片追技術