条件渲染

一、v-if

　　1、在 <template> 元素上使用 v-if 条件渲染分组：

　　　　因为 v-if 是一个指令，所以必须将他添加到一个元素上，但如果想切换多个元素的话，就可以把 template 元素当作不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

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

　　2、v-else 

 　　　　使用 v-else 指令来表示 v-if 的 ”else” 块：

<div id="test">
    <div v-if="result">
        Now you see me
    </div>
    <div v-else>
        Now you don't
    </div>
</div>

    var test = new Vue({
        el: '#test',
        data: {
            result: Math.random() > 0.5
        }
    })

　　结果为：

 

 　　3、v-else-if

　　　　v-else-if，顾名思义，充当 v-if 的 “else-if” 块，可以连续使用，类似于 v-else，v-else-if 也必须紧跟在 v-if 或者 v-else-if 的元素后：

<div id="test">
    <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>

    var test = new Vue({
        el: '#test',
        data: {
            type: 'A'
        }
    })

　　结果为：

　　4、用 key 管理可复用的元素

　　　　Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处，比如允许用户在不同登陆方式之间切换：

<div id="test1">
    <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>
    <button v-on:click="toggleLoginType()">Toggle login type</button>
</div>

var test1 = new Vue({
        el: '#test1',
        data: {
            loginType: 'username'
        },
        methods: {
            toggleLoginType: function() {
                return this.loginType = this.loginType === 'username' ? 'email' : 'username'
            }
        }
    })

　　结果为：

 

 

 

 　　　　这样做也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达 “这两个元素完全独立的，不要复用它们”，只需要添加一个具有唯一值的 key arrtibute 即可；

<div id="test2">
    <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>
    <button v-on:click="toggleLoginType()">Toggle login type</button>
</div>

var test1 = new Vue({
        el: '#test2',
        data: {
            loginType: 'username'
        },
        methods: {
            toggleLoginType: function() {
                return this.loginType = this.loginType === 'username' ? 'email' : 'username'
            }
        }
    })

二·、v-show

　　另一个用于根据条件展示元素的选项是 v-show 指令，用法大致一样：

　　不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show只是简单地切换元素的 VSS property display

　　注意：v-show 不支持 <template> 元素，也不支持 v-else。

<div id="test">
    <h1 v-show="ok">Hello!</h1>
</div>

var test = new Vue({
        el: '#test',
        data: {
            ok: true
        }
    })