淺析Vue.js 中的條件渲染指令

時間 2019-12-14

原文原文鏈接

1 應用於單個元素html

Vue.js 中的條件渲染指令能夠根據表達式的值，來決定在 DOM 中是渲染仍是銷燬元素或組件。vue

html：app

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

輸出結果：this

扁肉.net

當表達式的值爲 true 時，當前元素或組件及全部的子節點都會被渲染出來。htm

2 應用於多個元素blog

上述示例中的代碼只能判斷當前元素，若是須要一次性判斷多個元素，那麼可使用 <template> 元素並在該元素中使用條件指令，最終的渲染結果不會包含 <template> 元素。ip

html：get

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