Vue Conditional Rendering

Vue：2.5

Vue 對於 UI 上顯示的條件判斷式通常是使用 v-if、v-else、v-else-if、v-show 這幾個語法來處理。

v-if

Notice： v-for 執行優先權大於 v-if。

範例

<div id="app">
    <!-- v-if -->
    <span v-if="ok">Now you see me</span>
    <span v-else>Disable</span>

    <!-- v-else-if -->
    <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>

const vm = new Vue({
    el: '#app',
    data: {
        ok: false,
        type: 'D'
    }
});

Vue 為了讓 render 的效率更好，因此只會針對不同的地方做調整，並不會整個 Element 都重新 render，因此如果遇到 input 這種讓使用自行輸入的元件，不管你怎麼切換 value 都不會被刪除。

範例

<div id="app">
    <!-- 使用者輸入的 value 並不會切換而清空 -->
    <div v-if="isName">
        <input type="text" placeholder="請輸入姓名">
    </div>
    <div v-else>
        <input type="text" placeholder="請輸入 E-mail">
    </div>
    <button @click="toggle">切換</button>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        isName: true,
    },
    methods: {
        toggle: function () {
            this.isName = !this.isName;
        }
    }
});

如果遇到這種問題，必須再加入 key attribute，讓 Vue 知道是不同的元件。

<div id="app">
    <div v-if="isName">
        <input type="text" placeholder="請輸入姓名" key="name-input">
    </div>
    <div v-else>
        <input type="text" placeholder="請輸入 E-mail" key="email-input">
    </div>
    <button @click="toggle">切換</button>
</div>

v-show

v-show 和 v-if 用法其實差不多，但有幾點差別：

• v-show 沒有 else
• v-if 會根據條件決定要不要 render，v-show 是會全部 render 再隱藏。
• v-show 不支援 <template>

範例

<div id="app">
    <div v-if="isShow">Show</div>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        isShow: false,
    }
});