vue學習：條件渲染指令
阿新 • • 發佈：2018-12-14
一、v-if v-else-if v-else
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js"></script> </head> <body> <div id="app"> {{message}} <div v-if="message==='A'"> str = {{message}} </div> <div v-else-if="message==='B'"> str = {{message}} </div> <div v-else-if="message==='C'"> str = {{message}} </div> <div v-else> str = null </div> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ message: 'B' } }) </script> </html>
二、v-show
v-show也是根據條件展示元素的指令。帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 是簡單地切換元素的 CSS 屬性 display 。
v-show 不支援 <template> 語法，也不支援 v-else。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js"></script> </head> <body> <div id="app"> <div v-show="flag"> you can see me </div> </div> </body> <script> var vm = new Vue({ el:"#app", data:{ flag: true } }) </script> </html>
三、v-if和v-show的區別
v-if :1.是真正的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。
2.是惰性的，只有當條件為true時才會渲染，如果條件為false則什麼都不做
3.有很高的切換開銷，適用於條件不太容易改變的時候
v-show:1.不管條件是true還是false都會進行渲染。並且只是簡單地基於 CSS 進行切換
2.有很高的初始渲染開銷，適用於非常頻繁地切換
四、用key管理科複用的元素
Vue 會盡可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。
<div class="demo">
<button @click="greet">toggle 切換</button>
<template v-if="ok">
<label>使用者名稱</label>
<input placeholder="輸入使用者名稱" key="username-input">
</template>
<template v-else>
<label>暱稱</label>
<input placeholder="輸入暱稱" key="nickname-input">
</template>
</div>
var vm = new Vue({
el: '.demo',
data: {
ok: true
},
methods: {
greet: function (event) {
this.ok=!this.ok;
}
}
})如果不新增key屬性，點選切換，雖然dom變了，但是vue在渲染元素時，出於效率考慮，會盡可能的複用已有的元素而非重新渲染。如果兩個input框添加了key屬性以後，就不會複用了。