v-if v-else

假設我們將 Vue.js 例項定義為：

var vm = new Vue({
    el: '#example',
    data: {
        a: true,
        b: false
    }
});

你可以通過包含 v-if 指令有條件地呈現任何 html 元素; 包含 v-if 的元素僅在條件計算結果為 true 時才會呈現：

<!-- will render 'The condition is true' into the DOM -->
<div id="example">
    <h1 v-if="a">The condition is true</h1>
</div>

在這種情況下，<h1> 元素將呈現，因為變數 a 為真。v-if 可以與任何表示式，計算屬性或計算為布林值的函式一起使用：

<div v-if="0 === 1">                  false; won't render</div>
<div v-if="typeof(5) === 'number'">   true; will render</div>

你可以使用 template 元素將多個元素組合在一起以獲得單個條件：

<!-- in this case, nothing will be rendered except for the containing 'div' -->
<div id="example">
    <template v-if="b">
        <h1>Heading</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template>
</div>

使用 v-if 時，你還可以選擇將計數器條件與 v-else 指令整合。僅當前一個 v-if 的條件為 false 時，才會顯示元素內包含的內容。請注意，這意味著具有 v-else 的元素必須緊跟在具有 v-if 的元素之後。

<!-- will render only 'ELSE' -->
<div id="example">
    <h1 v-if="b">IF</h1>
    <h1 v-else="a">ELSE</h1>
</div>

就像 v-if 一樣，使用 v-else，你可以在 <template> 中將多個 html 元素組合在一起：

<div v-if="'a' === 'b'"> This will never be rendered. </div>
<template v-else>
    <ul>
      <li> You can also use templates with v-else. </li>
      <li> All of the content within the template </li>
      <li> will be rendered. </li>
    </ul>
</template>