[Vue] 條件渲染

v-if

• 可搭配 v-else 使用
• 必須緊跟在 v-if 或 v-else-if 之後

• 也可搭配 v-else-if 使用
• 必須緊跟在 v-if 之後

• 可搭配<template>使用
• 實際渲染時, 不會存在的元素

index.html

<div v-if="showHint">看情況顯示文字</div>

index.js

var app = new Vue({

    el: '#app',

    data: {

showHint: true

}

})

渲染機制

• v-if, v-else 在使用時, 重複的內容"不會"重新渲染
• 若要重新渲染, 應加上"key"屬性
• 沒被加上key的元素, 依然會重複使用

        <div v-if="showHint">

            看情況顯示文字 <br>

            <input type="text" key="input1">

        </div>

        <div v-else>

            Hi v-else顯示 <br>

            <input type="text" key="input2">

        </div>

v-show

• 單純的css display切換
• DOM在一開始就會渲染

v-if , v-show

• 頻繁的切換用 v-show
• v-if 耗用的資源較多

v-if 和 v-for 同時使用

• v-for先執行, v-if後執行
• 官方不建議這樣使用

source code