你可以使用 v-repeat 指令來(lái)基于 ViewModel 上的對(duì)象數(shù)組渲染列表。對(duì)于數(shù)組中的每個(gè)對(duì)象，該指令將創(chuàng)建一個(gè)以該對(duì)象作為其 $data 對(duì)象的子 Vue 實(shí)例。這些子實(shí)例繼承父實(shí)例的數(shù)據(jù)作用域，因此在重復(fù)的模板元素中你既可以訪問子實(shí)例的屬性，也可以訪問父實(shí)例的屬性。此外, 你還可以通過 $index 屬性來(lái)獲取當(dāng)前實(shí)例對(duì)應(yīng)的數(shù)組索引。

示例：

<ul id="demo">
  <li v-repeat="items" class="item-{{$index}}">
    {{$index}} - {{parentMsg}} {{childMsg}}
  </li>
</ul>

var demo = new Vue({
  el: '#demo',
  data: {
    parentMsg: 'Hello',
    items: [
      { childMsg: 'Foo' },
      { childMsg: 'Bar' }
    ]
  }
})

結(jié)果：

• 0 - Hello Foo
• 1 - Hello Bar

塊級(jí)重復(fù)

有時(shí)我們可能需要重復(fù)一個(gè)包含多個(gè)節(jié)點(diǎn)的塊，這時(shí)可以用 <template> 標(biāo)簽包裹這個(gè)塊。這里的 <template> 標(biāo)簽只起到語(yǔ)義上的包裹作用，其本身不會(huì)被渲染出來(lái)。例如：

<ul>
  <template v-repeat="list">
    <li>{{msg}}</li>
    <li class="divider"></li>
  </template>
</ul>

簡(jiǎn)單值數(shù)組

簡(jiǎn)單值 (primitive value) 即字符串、數(shù)字、boolean 等并非對(duì)象的值。對(duì)于包含簡(jiǎn)單值的數(shù)組，你可用 $value 直接訪問值：

<ul id="tags">
  <li v-repeat="tags">
    {{$value}}
  </li>
</ul>

new Vue({
  el: '#tags',
  data: {
    tags: ['JavaScript', 'MVVM', 'Vue.js']
  }
})

結(jié)果：

• JavaScript
• MVVM
• Vue.js

使用別名

有時(shí)我們可能想要更明確地訪問當(dāng)前作用域的變量而不是隱式地回退到父作用域。你可以通過提供一個(gè)參數(shù)給 v-repeat 指令并用它作為將被迭代項(xiàng)的別名：

<ul id="users">
  <li v-repeat="user in users">
    {{user.name}} - {{user.email}}
  </li>
</ul>

new Vue({
  el: '#users',
  data: {
    users: [
      { name: 'Foo Bar', email: 'foo@bar.com' },
      { name: 'John Doh', email: 'john@doh.com' }
    ]
  }
})

結(jié)果：

• Foo Bar - foo@bar.com
• John Doh - john@doh.com

這里的 user in users 語(yǔ)法只在 Vue 0.12.8 及其以上版本中可用。老版本需要使用 user : users 語(yǔ)法。

在 v-repeat 中使用別名會(huì)讓模板可讀性更強(qiáng)，同時(shí)性能更好。

變異方法

Vue.js 內(nèi)部對(duì)被觀察數(shù)組的變異方法 (mutating methods，包括 push(), pop(), shift(), unshift(), splice(), sort() 和 reverse()) 進(jìn)行了攔截，因此調(diào)用這些方法也將自動(dòng)觸發(fā)視圖更新。

// 以下操作會(huì)觸發(fā) DOM 更新
demo.items.unshift({ childMsg: 'Baz' })
demo.items.pop()

擴(kuò)展方法

Vue.js 給被觀察數(shù)組添加了兩個(gè)便捷方法：$set() 和 $remove() 。

你應(yīng)該避免直接通過索引來(lái)設(shè)置數(shù)據(jù)綁定數(shù)組中的元素，比如 demo.items[0] = {}，因?yàn)檫@些改動(dòng)是無(wú)法被 Vue.js 偵測(cè)到的。你應(yīng)該使用擴(kuò)展的 $set() 方法：

// 不要用 `demo.items[0] = ...`
demo.items.$set(0, { childMsg: 'Changed!'})

$remove() 只是 splice()方法的語(yǔ)法糖。它將移除給定索引處的元素。當(dāng)參數(shù)不是數(shù)值時(shí)，$remove() 將在數(shù)組中搜索該值并刪除第一個(gè)發(fā)現(xiàn)的對(duì)應(yīng)元素。

// 刪除索引為 0 的元素。
demo.items.$remove(0)

替換數(shù)組

當(dāng)你使用非變異方法，比如filter()， concat() 或 slice()，返回的數(shù)組將是一個(gè)不同的實(shí)例。在此情況下，你可以用新數(shù)組替換舊的數(shù)組：

demo.items = demo.items.filter(function (item) {
  return item.childMsg.match(/Hello/)
})

你可能會(huì)認(rèn)為這將導(dǎo)致整個(gè)列表的 DOM 被銷毀并重新渲染。但別擔(dān)心，Vue.js 能夠識(shí)別一個(gè)數(shù)組元素是否已有關(guān)聯(lián)的 Vue 實(shí)例， 并盡可能地進(jìn)行有效復(fù)用。

使用 track-by

在某些情況下，你可能需要以全新的對(duì)象（比如 API 調(diào)用所返回的對(duì)象）去替換數(shù)組。如果你的每一個(gè)數(shù)據(jù)對(duì)象都有一個(gè)唯一的 id 屬性，那么你可以使用 track-by 特性參數(shù)給 Vue.js 一個(gè)提示，這樣它就可以復(fù)用已有的具有相同 id 的 Vue 實(shí)例和 DOM 節(jié)點(diǎn)。

例如，如果你的數(shù)據(jù)長(zhǎng)這樣：

{
  items: [
    { _uid: '88f869d', ... },
    { _uid: '7496c10', ... }
  ]
}

那么你可以像這樣給出提示:

<div v-repeat="items" track-by="_uid">
  `<!-- content -->
</div>

在替換 items 數(shù)組時(shí)，Vue.js 如果碰到一個(gè)有 _uid: '88f869d' 的新對(duì)象，它就會(huì)知道可以直接復(fù)用有同樣 _uid 的已有實(shí)例。

如果沒有唯一的 id 可以用來(lái)追蹤，也可以使用 track-by="$index"，也就是原地復(fù)用實(shí)例和 DOM 節(jié)點(diǎn)。請(qǐng)務(wù)必小心使用此功能，因?yàn)樵谧粉?$index 時(shí)，Vue 不會(huì)移動(dòng)子實(shí)例及 DOM 節(jié)點(diǎn)，只是按他們第一次被創(chuàng)建時(shí)的順序復(fù)用。有兩種情形應(yīng)避免使用 track-by="$index"：

1. 當(dāng)重復(fù)的塊包含表單輸入框，且輸入框綁定的值可能導(dǎo)致數(shù)組被重新排序；

2. 在重復(fù)組件時(shí)，組件除了接收的數(shù)組數(shù)據(jù)外，還包含私有的狀態(tài)。

在使用全新數(shù)據(jù)重新渲染大型 v-repeat 列表時(shí)，合理使用 track-by 能極大地提升性能。

遍歷對(duì)象

你也可以使用 v-repeat 遍歷一個(gè)對(duì)象的所有屬性。每個(gè)重復(fù)的實(shí)例會(huì)有一個(gè)特殊的屬性 $key。對(duì)于簡(jiǎn)單值，你也可以象訪問數(shù)組中的簡(jiǎn)單值那樣使用 $value 屬性。

<ul id="repeat-object">
  <li v-repeat="primitiveValues">{{$key}} : {{$value}}</li>
  <li>===</li>
  <li v-repeat="objectValues">{{$key}} : {{msg}}</li>
</ul>

new Vue({
  el: '#repeat-object',
  data: {
    primitiveValues: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    },
    objectValues: {
      one: {
        msg: 'Hello'
      },
      two: {
        msg: 'Bye'
      }
    }
  }
})

結(jié)果：

• FirstName ： John
• LastName ： Doe
• Age ： 30
• ===
• one ： Hello
• two ： Bye

在 ECMAScript 5 中，對(duì)于給對(duì)象添加一個(gè)新屬性，或是從對(duì)象中刪除一個(gè)屬性時(shí)，沒有機(jī)制可以檢測(cè)到這兩種情況。針對(duì)這個(gè)問題，Vue.js 中的被觀察對(duì)象會(huì)被添加三個(gè)擴(kuò)展方法: $add(key, value)， $set(key, value) 和 $delete(key)。這些方法可以被用于在添加 / 刪除觀察對(duì)象的屬性時(shí)觸發(fā)對(duì)應(yīng)的視圖更新。方法 $add 和 $set 的不同之處在于當(dāng)指定的鍵已經(jīng)在對(duì)象中存在時(shí) $add 將提前返回，所以調(diào)用 obj.$add(key) 并不會(huì)以 undefined 覆蓋已有的值。

迭代值域

v-repeat 也可以接受一個(gè)整數(shù)。在這種情況下，它將重復(fù)顯示一個(gè)模板多次。

<div id="range">
    <div v-repeat="val">Hi! {{$index}}</div>
</div>```

```new Vue({
  el: '#range',
  data: {
    val: 3
  }
});

結(jié)果：

• Hi! 0
• Hi! 1
• Hi! 2

數(shù)組過濾器

有時(shí)候我們只需要顯示一個(gè)數(shù)組的過濾或排序過的版本，而不需要實(shí)際改變或重置原始數(shù)據(jù)。Vue 提供了兩個(gè)內(nèi)置的過濾器來(lái)簡(jiǎn)化此類需求： filterBy 和 orderBy?？刹榭?方法文檔 獲得更多細(xì)節(jié)。

下一步: 事件監(jiān)聽。