條件渲染
v-if指令
- ? 利用
v-if指令，可以實(shí)現(xiàn)在同一頁(yè)面，不同的時(shí)期，根據(jù)需要渲染顯示不同的塊或模板<template>，實(shí)現(xiàn)不同的功能需求，從而提高頁(yè)面的復(fù)用率。不同于Angular的*ngIf，在Vue中還提供了v-else指令，來(lái)表示v-if的else塊。在2.1.0中還新增了v-else-if指令，顧名思義，充當(dāng)v-if的else if塊，類(lèi)似一般編程語(yǔ)言中的控制語(yǔ)句（if--else if--else），v-else-if可以鏈?zhǔn)降厥褂枚啻巍?/li>
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'"> B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
- 值得注意的是類(lèi)似
v-else，v-else-if必須跟在v-if或者v-else-if元素之后。
v-show指令
-
v-show也是一個(gè)根據(jù)條件展示選項(xiàng)的指令。用法大致一樣：<h1 v-show="ok">Hello!</h1> 不同的是帶有
v-show的元素始終會(huì)被渲染并保留在DOM中，本質(zhì)上講，v-show只是簡(jiǎn)單的切換元素的css屬性display。并且，v-show不支持<template>語(yǔ)法和v-else指令。
v-if與v-show的區(qū)別與應(yīng)用場(chǎng)景
-
v-if是正真的條件渲染，因?yàn)?code>v-if是惰性的，如果在初始渲染時(shí)條件為假，則什么也不做一直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開(kāi)始渲染條件塊。同時(shí)，他會(huì)確保在切換過(guò)程中條件塊內(nèi)的時(shí)間監(jiān)聽(tīng)器和子組件適當(dāng)?shù)劁N(xiāo)毀和重建。 -
v-show則不管初始條件是什么，元素總會(huì)被渲染，并且只是簡(jiǎn)單的基于css進(jìn)行切換。 - 一般來(lái)說(shuō)，
v-if有更高的切換開(kāi)銷(xiāo)，而v-show有更高的初始渲染開(kāi)銷(xiāo)。因此，如果需要非常頻繁地切換，則使用v-show較好；如果在運(yùn)行時(shí)條件不太可能改變，則使用v-if較好。
列表渲染
用v-for渲染一個(gè)數(shù)組
- 我們用
v-for指令根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染，該指令需要使用item in items形式的特殊語(yǔ)法，items是源數(shù)據(jù)數(shù)組，并且item是數(shù)組元素迭代的別名。在v-for塊，我們對(duì)父作用域?qū)傩杂型耆脑L問(wèn)權(quán)限，v-for還支持一個(gè)可選的第二個(gè)參數(shù)為當(dāng)前項(xiàng)的索引。（也可以用of代替in，因?yàn)樗亲罱咏?code>javascript迭代器的語(yǔ)法）
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
let example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
用v-for渲染一個(gè)對(duì)象
- 我們也可以用
v-for通過(guò)一個(gè)對(duì)象的屬性來(lái)迭代，我們可以提供第二個(gè)可選參數(shù)為鍵名，第三個(gè)可選參數(shù)為索引。在遍歷對(duì)象時(shí)，是按Object.keys()的結(jié)果遍歷的，但是不能保證他的結(jié)果在不同的Javascript引擎下是一致的。建議盡可能在使用v-for時(shí)提供key，除非遍歷輸出的 DOM 內(nèi)容非常簡(jiǎn)單，或者是刻意依賴(lài)默認(rèn)行為以獲取性能上的提升。因?yàn)樗?Vue 識(shí)別節(jié)點(diǎn)的一個(gè)通用機(jī)制，key并不與v-for特別關(guān)聯(lián)，key 還具有其他用途。
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
let vm = new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
用v-for渲染一段取值范圍
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
輸出：1 2 3 4 5 6 7 8 9 10
用v-for渲染<template>和組件
- 類(lèi)似
v-if，我們也可以用帶有v-for的<template>渲染多個(gè)元素或者直接渲染一個(gè)組件。比如：
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
- 在自定義組件中，我們可以像任何普通元素一樣使用
v-for。在2.2.0+的版本中，當(dāng)在組件中使用v-for時(shí)，key是必須的。
<my-component
v-for="(item, index) in items"
v-bind:item="item"
v-bind:index="index"
v-bind:key="item.id"
></my-component>
- 不自動(dòng)將
item注入到組件里的原因是，這會(huì)使得組件與v-for的運(yùn)作緊密耦合。明確組件數(shù)據(jù)的來(lái)源能夠使組件在其他場(chǎng)合重復(fù)使用。
