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 屬性。