Vue语法学习第五课——条件渲染

① v-if 、v-else-if 、v-else

<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>

　　（1）v-if 指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 

　　（2）v-else-if 和 v-else 必须紧跟在 v-if 的元素之后

　　用于 <template> 可使用 key 管理可复用的元素：

　　<div id="app0">
         <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><br/>
        <button @click="changeLoginType">{{loginType}}</button>
    </div>

        var vm = new Vue({
            el:"#app0",
            data:{                
                loginType : "username"
            },
            methods : {
                changeLoginType : function(){
                    if(this.loginType === 'username'){
                        this.loginType = "emailAddress";
                    }
                    else{
                        this.loginType = "username";
                    }
                    
                }
            }
        });

　　此时把这个 <template> 元素当做不可见的包裹元素，并使用v-if 。 最终的渲染结果不包含 <template> 元素。

　　Vue 提供了 key 这个属性来表达“这两个元素是完全独立的，不要复用它们”。独立元素的 key 值应是唯一值（不添加key值的label元素仍然会被高效地复用）。

 ② v-show

　　v-show 与 v-if 类似，都是用于根据条件展示元素，v-show 用法如下：

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

 　　v-show 的元素始终会被渲染并保留在DOM中，其作用只是简单的切换元素的 css 属性的 display。

　　注：v-show 不支持 template 也没有对应的 v-else 。

③ v-show 和 v-if 对比

　　（1）v-if 会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。

　　　　  v-if 是惰性的：只有在条件第一次变为真时才会开始渲染条件块。

　　（2）v-show 不论条件是否为真，总是会渲染元素，并且在条件的值改变时只做 CSS 的切换。

　　（3）v-if 具有更高的切换开销；v-show具有更高的初始渲染开销。

　　　　  如果频繁切换应优先选择 v-show ；如果条件几乎不会改变时优先选择 v-if 。