v-if v-else

因為 v-if 是一個指令，所以必須將它新增到一個元素上

 <div id="div1">
        <div v-if="ok">yes</div>
        <div v-else>no</div>
 </div>

<script type="text/javascript">
        new Vue({
            el: "#div1",
            data: {
                ok: false
            }
        })
</script>
 

瀏覽器僅僅輸出一個no

v-else-if

類似於 v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之後。

   <div id="tmp">
        <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 type="text/javascript">
        new Vue({
            el: "#tmp",
            data: {
                type: 'A'
            }
        })
    </script>
    
 

瀏覽器僅僅渲染出一個A

template使用 v-if

   <div id="tmp2">
        <template v-if="ok">
            <h1>Title</h1>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
        </template>
    </div>

    <script type="text/javascript">
        new Vue({
            el: "#tmp2",
            data: {
                ok: true
            }
        })
    </script>
 

輸出如下：

Title
Paragraph 1

Paragraph 2

用key管理可複用的元素

1、Vue 會盡可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。這麼做除了使 Vue 變得非常快之外，還有其它一些好處。例如，如果你允許使用者在不同的登入方式之間切換

<div id="tmp3">
        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address">
        </template>
    </div>


    <script type="text/javascript">
        new Vue({
            el: "#tmp3",
            data: {
                loginType: "username"
            }
        })
    </script>

效果渲染如下：

Username （Enter your username）

點選toggle按鈕後的效果：

2、那麼在上面的程式碼中切換 loginType 將不會清除使用者已經輸入的內容。因為兩個模板使用了相同的元素， 不會被替換掉——僅僅是替換了它的 placeholder。

這樣也不總是符合實際需求，所以 Vue 為你提供了一種方式來表達“這兩個元素是完全獨立的，不要複用它們”。只需新增一個具有唯一值的 key 屬性即可：

<div id="tmp4">
        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username" key="username-input">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address" key="email-input">
        </template>
    </div>


    <script type="text/javascript">
        new Vue({
            el: "#tmp4",
            data: {
                loginType: "usernamee"
            }
        })
    </script>

v-show

另一個用於根據條件展示元素的選項是 v-show 指令。用法大致一樣：
不同的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。
注意，v-show 不支援 元素，也不支援 v-else。

   <h1 v-show="ok" id="show">
        hello v-show
    </h1>
    <script type="text/javascript">
        new Vue({
            el: "#show",
            data: {
                ok: true
            }
        })
    </script>

v-if vs v-show區別？

v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。

v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。

相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。

v-if 與 v-for結合

    <div id="div5">
        <p v-for="(item,index) in items" v-if="index === 1">{{ item }}</p>
    </div>
    <script type="text/javascript">
        new Vue({
            el: "#div5",
            data: {
                items: [1, 2, 3],
                active: true
            },
        })
    </script>

輸出2