條件渲染
條件渲染嘴高，就滿足一定的條件以后才會(huì)渲染贸呢。
v-if
v-if指令類似于奏司，js中的if語句，當(dāng)條件滿足時(shí)才會(huì)執(zhí)行
<span v-if="ok">v-if</span> //ok的值為true谎砾，span標(biāo)簽才會(huì)被渲染
<template v-if="ok"> //同時(shí)渲染多個(gè)元素
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
var vm = new Vue({
el: '#app',
data: {
ok: true,
no: true,
type: 'c',
toggle: true
}
});
v-else
v-else指令逢倍，類似于js中的else語句，當(dāng)v-if條件不成立是景图，v-else就會(huì)渲染较雕。
<span v-if="ok">v-if</span>
<span v-else>v-else</span> //當(dāng)ok 的值為false，是渲染
v-else必須緊跟著在v-if或者v-else-if的到后面挚币，否則不會(huì)被識(shí)別亮蒋。
v-else-if
是2.1.0新增加的指令，類似于js中的else if忘晤，可以鏈?zhǔn)绞褂枚啻巍?/p>
<p v-if="type === 'a'">a</p>
<p v-else-if="type === 'b'">b</p>
<p v-else="">not a and b</p>
v-else-if必須緊跟著在v-if或者v-else-if的到后面宛蚓，否則不會(huì)被識(shí)別激捏。
用key管理可復(fù)用的元素
vue會(huì)盡可能的高效的渲染元素设塔，通常會(huì)復(fù)用已有元素而不會(huì)從頭渲染
<p v-if="toggle"><label>username </label> <input type="text" placeholder="username"></p>
<p v-else=""><label>email</label> <input type="text" placeholder="email"></p>
<button @click="toggle = !toggle">toggle</button>
上面例子因?yàn)閮蓚€(gè)p標(biāo)簽用用了相同的元素，<input>不會(huì)被替換掉，僅僅是替換了他的placeholder闰蛔。
當(dāng)我們不想復(fù)用他們時(shí)任连，只要加上唯一的key屬性
<p v-if="toggle"><label>username </label> <input type="text" placeholder="username" key="username"></p>
<p v-else=""><label>email</label> <input type="text" placeholder="email" key="email"></p>
<button @click="toggle = !toggle">toggle</button>
注意, <label> 元素仍然會(huì)被高效地復(fù)用繁涂，因?yàn)樗鼈儧]有添加 key 屬性拱她。
v-show
v-show與v-if的用法幾乎一致
<span v-show="ok">v-show</span>
v-show VS v-if
-
v-show不支持<template>語法，也不支持v-else扔罪。 -
v-if是真正的條件渲染秉沼，因?yàn)樗_保在切換過程中條件塊內(nèi)部的事件監(jiān)聽器和子組件適當(dāng)?shù)谋讳N毀和重建 -
v-if也是惰性的，如果在處事渲染時(shí)條件為假矿酵，則什么也不做唬复，直到條件為真時(shí)，才開始渲染條件塊 -
v-show就簡單的多全肮，不管條件是啥總會(huì)被渲染敞咧，并且只是簡單的基于css的切換 - 一般需要頻繁的切換就是用
v-show，運(yùn)行條件不太會(huì)改變則使用v-if - 當(dāng)
v-if與v-for一起使用時(shí)辜腺，v-for具有比v-if更高的優(yōu)先級(jí)
列表渲染
v-for
我們用 v-for 指令根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染妄均。基本用法如下：
<div id="app">
<ul>
<li v-for="item in items" v-text="item.text"></li>
</ul>
</div>
var vm = new Vue({
el: '#app',
data: {
items: [
{text: 'item1'},
{text: 'item2'},
{text: 'item3'}
]
}
});
v-for 還支持可選的第二個(gè)參數(shù)為當(dāng)前項(xiàng)的索引
<ul>
<li v-for="(val,index) in items" v-text="(index+1) + '. ' + val.text"></li>
</ul>
利用template標(biāo)簽同時(shí)渲染多個(gè)標(biāo)簽
<ul>
<template v-for="(val, index) in items">
<li>{{index}}</li>
<li>{{val.text}}</li>
</template>
</ul>
對(duì)象的迭代哪自，是按 Object.keys() 的結(jié)果遍歷丰包，但是不能保證它的結(jié)果在不同的 JavaScript 引擎下是一致的
<span v-for="key in obj">{{key}}</span>
<p v-for="(key, value) in obj">{{key}}: {{value}}</p>
<p v-for="(key, value, index) in obj">{{key}}: {{value}}: {{index}}</p>
<button v-for="i in 10">{{i}}</button>
當(dāng)?shù)秩居錾辖M件
<div id="#app">
<my-ul :items="items"></my-ul> //將數(shù)據(jù)注入子組件
</div>
<template id="myul">
<ul>
<li v-for="i in items">{{i.text}}</li>
</ul>
</template>
<script>
Vue.component('my-ul',{
template: '#myul',
props: ['items'] //接受父組件傳進(jìn)了的數(shù)據(jù)
});
var vm = new Vue({
el: '#app',
data: {
items: [
{text: 'item1'},
{text: 'item2'},
{text: 'item3'}
]
}
});
</script>
key
當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時(shí)，它默認(rèn)用 “就地復(fù)用” 策略壤巷。
建議盡可能使用v-for 來提供 key 邑彪，除非迭代 DOM 內(nèi)容足夠簡單，或者你是故意要依賴于默認(rèn)行為來獲得性能提升胧华。用法跟前面一樣寄症。
數(shù)組的更新檢查
Vue包含一組觀察數(shù)組的變異方法，所以它們也將會(huì)觸發(fā)視圖更新矩动。這些方法如下
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
這些方法都會(huì)改變原數(shù)組有巧，也有一些方法是返回一個(gè)新數(shù)組，不會(huì)改變原數(shù)組悲没。例如： filter(), concat(), slice() 五垮。當(dāng)使用非變異方法時(shí)，可以用新數(shù)組替換舊數(shù)組婴谱。
注意事項(xiàng)
由于 JavaScript 的限制， Vue 不能檢測以下變動(dòng)的數(shù)組： - 當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)逊笆，例如：
vm.items[indexOfItem] = newValue - 當(dāng)你修改數(shù)組的長度時(shí)，例如：
vm.items.length = newLength
解決方法：
Vue.set(example1.items, indexOfItem, newValue)
example1.items.splice(indexOfItem, 1, newValue)
example1.items.splice(newLength)
數(shù)據(jù)過濾
我們想要顯示一個(gè)數(shù)組的過濾或排序副本岂傲，而不實(shí)際改變或重置原始數(shù)據(jù)难裆。
奇數(shù)：<span v-for="i in odd">{{i}}</span>
偶數(shù)：<span v-for="i in even(number)">{{i}}</span>
var vm = new Vue({
el: '#app',
data: {
number: [1,2,3,4,5,6]
},
computed: {
odd: function(){
return this.number.filter(function(i){
return i%2 === 1;
})
}
},
methods: {
even: function(arr){
return arr.filter(function(i){
return i%2 === 0;
})
}
}
});
