上一篇了解Vue的循環指令後，這篇我們將介紹也是寫程式時常用的：條件判斷，Vue一樣提供一些指令可以來做條件渲染(Conditional Rendering)，下面我們來詳細介紹一下。

條件渲染指令

v-show

• 用途：根據表達式值的true或false，切換元素的display CSS屬性，含v-show的元素會根據表達式的布林值來達到顯示或消失的效果。
• 用法：

<div id="app">
    <p v-show="isShow">{{ message }}</p>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        message: 'This is example of v-show',
        isShow: true
    }
});
// 每1秒改變isShow的布林值
setInterval(function() {
    vm.isShow = !vm.isShow;
}, 1000)

• run on JSFiddle

v-if & v-else-if & v-else

**v-else-if為2.1.0版本後才加入。

• 用途：就像是條件判斷一樣，當條件成立後，才會將某區塊資料綁定並且描繪出來。
• 用法：

1. 單純使用v-if：

跟上面的v-show的例子有點像，條件判斷true會顯示，條件判斷false會消失。

<div id="app">
    <p v-if="isShow">{{ message }}</p>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        message: 'This is example of v-if',
        isShow: true
    }
});
// 每2秒改變isShow的布林值
setInterval(function() {
    vm.isShow = !vm.isShow;
}, 2000)

• run on JSFiddle

2. v-if & v-else-if & v-else混合使用：

這就跟其他程式語言的if、else if、else的概念很像，當達到條件判斷，即會執行該條件底下的敘述(描繪畫面)。

**條件判斷三個等於符號(===)或兩個等於符號(==)都可以。

<div id="app">
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        type: 'B'
    }
});

• run on JSFiddle

v-if vs v-show

雖然v-if跟v-show看起來很像，但是它們還是有一些差別的：

v-if with v-for

v-for優先權高於v-if，也就是當這兩個指令同時出現在同一個元素時，v-if會隨著v-for的循環次數而判斷條件幾次。

範例1：

<div id="app">
    <ul>
        <li v-if="n <= 5" v-for="n in 10">{{ n }}</li>
    </ul>
</div>

var vm = new Vue ({
    el: '#app'
});

• run on JSFiddle

範例2：

<div id="app">
    <ul v-if="animalsArray.length">
        <li v-for="animal in animalsArray">{{ animal }}</li>
    </ul>
</div>

var vm = new Vue ({
    el: '#app',
    data: {
        animalsArray: [ 'pig', 'dog', 'bird' ]
    }
});

• run on JSFiddle

前面我們知道很多directives的功能了，像是資料或屬性綁定、事件處理、列表或條件的渲染，下一篇我們再介紹幾個比較不常用，但是在某些時候使用很方便的directives。

參考資料

• Vue.js - v-show
• Vue.js - Conditional Rendering
• Vue.js - List Rendering
• Vue.js (3) - 指令 (Directives) 與過濾器 (Filters)
• Vue.js: 條件渲染 v-if、v-show