Vue.js--條件判斷（v-if、v-else、v-else-if、v-show）

v-if

條件判斷使用v-if指令：

<div id="app">
    <p v-if="seen">你看不到我</p>
    <template v-if="ok">
    <h1>測試</h1>
    <p>春江潮水連海平</p>
    <p>海上明月共潮生</p>
    </template>
</div>
    
<script>
new Vue({
el: '#app',
data: {
    seen: false,
    ok: true
}
})
</script>  
           

這裡， v-if 指令将根據表達式 seen 的值(true 或 false )來決定是否插入 p 元素。

v-else

可以用v-else指令給v-if添加一個“else”塊：

示例：随機生成一個數字，判斷是否大于0.5，然後輸出對應資訊：

<div id="app">
    <div v-if="Math.random() > 0.5">
        大于0.5
    </div>
    <div v-else>
        小于等于0.5
    </div>
</div>
    
<script>
new Vue({
    el: '#app'
});
</script>
           

v-else-if

2.1.0新增，顧名思義，用作v-if的else-if塊。可以鍊式多次使用：

示例：判斷type變量的值

<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>

<script>
    new Vue({
        el: '#app',
        data: {
            type: 'C'
        }
    })
</script>
           

v-show

也可以使用v-show指令來根據條件展示元素：

<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>