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