淺析Vue.js 中的條件渲染指令
阿新 • • 發佈：2018-12-11
1 應用於單個元素
Vue.js 中的條件渲染指令可以根據表示式的值，來決定在 DOM 中是渲染還是銷燬元素或元件。
html：
<div id="app"> <p v-if="type===1">拌麵</p> <p v-else-if="type===2">扁肉</p> <p v-else="type===3">其它</p> </div>
js：
<script>
var app = new Vue({
el: '#app',
data: {
type: 2
}
});
</script>輸出結果：
扁肉
當表示式的值為 true 時，當前元素或元件及所有的子節點都會被渲染出來。
2 應用於多個元素
上述示例中的程式碼只能判斷當前元素， 如果需要一次性判斷多個元素，那麼可以使用 <template> 元素並在該元素中使用條件指令，最終的渲染結果不會包含 <template> 元素 。
html：
<div id="app2"> <template v-if="type==='選單'"> <p>拌麵</p> <p>扁肉</p> <p>其它</p> </template> </div>
js：
var app2 = new Vue({
el: '#app2',
data: {
type:'選單'
}
});
渲染後的程式碼：
<div id="app2"><p>拌麵</p> <p>扁肉</p> <p>其它</p></div>
3 效能上的考量
另外 Vue.js 出於效能方面的考慮，會盡可能地複用已有的元素。
html：
<div id="app3"> <template v-if="type==='mobile'"> <label>手機號：</label> <input placeholder="請輸入手機號"> </template> <template v-else> <label>郵箱：</label> <input placeholder="請輸入郵箱"> </template> <button @click="toggleAccount">切換賬號</button> </div>
js：
var app3 = new Vue({
el: '#app3',
data: {
type: 'mobile'
},
methods: {
toggleAccount: function () {
this.type = (this.type === 'mobile' ? 'mail' : 'mobile');
}
}
});
效果（ demo ）：
從示例效果中我們可以發現，輸入框的內容並沒有發生變化，說明這裡 Vue.js 複用了 <input> 元素。
我們也可以通過指定 input 元素的唯一的 key 來避免被複用。
html：
<div id="app3"> <template v-if="type==='mobile'"> <label>手機號：</label> <input placeholder="請輸入手機號" key="mobile"> </template> <template v-else> <label>郵箱：</label> <input placeholder="請輸入郵箱" key="email"> </template> <button @click="toggleAccount">切換賬號</button> </div>
效果：
我們為每一個 input 指定了 key 屬性，所以它們是獨立的，每次點選都不一樣。而這裡的 label 是可複用的，因為我們沒有給它設定 key 屬性。