上一篇 介紹了vue.js實(shí)現(xiàn)條件渲染，這篇我們一起學(xué)習(xí)同樣十分常見的循環(huán)。
- v-for
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
在 v-for塊內(nèi)我們能完全訪問父組件作用域內(nèi)的屬性，另有一個(gè)特殊變量 $index，正如你猜到的，它是當(dāng)前數(shù)組元素的索引：
<ul id="example-1">
<li v-for="item in items">
{{ item.message }} - {{$index}}
</li>
</ul>
- template v-for
類似于 template v-if，也可以將 v-for用在 <template>標(biāo)簽上，以渲染一個(gè)包含多個(gè)元素的塊。例如：
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
數(shù)組相關(guān)操作：
Vue.js 包裝了被觀察數(shù)組的變異方法，故它們能觸發(fā)視圖更新。被包裝的方法有：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
你可以打開瀏覽器的控制臺(tái)，用這些方法修改上例的 items 數(shù)組。
例如：example1.items.push({ message: 'Baz' })。
- 對(duì)象遍歷
<ul id="repeat-object" class="demo">
<li v-for="value in object">
{{ $key }} : {{ value }}
</li>
</ul>
new Vue({
el: '#repeat-object',
data: {
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
})
也可以給對(duì)象的鍵提供一個(gè)別名:
<div v-for="(key, val) in object">
{{ key }} {{ val }}
</div>
- 值域v-for
v-for也可以接收一個(gè)整數(shù)，此時(shí)它將重復(fù)模板數(shù)次。
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
下一篇文章，我們將一起學(xué)習(xí)方法與事件處理器。
