Vue.js 學習旅程Mile 13 – List Rendering 列表渲染篇：v-for

v-for

使用 v-for 迭代陣列或物件中的每個元素。

陣列

<ul id="example-1">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

• items 是陣列資料，item 是陣列內每個元素
• 可以帶入第二個參數-索引值 index (optional)

使用 of 代替 in

可以用 of 替代 in 作為分隔符。請參考 MDN-for...of

物件

<div id="v-for-object" class="demo">
  <div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
  </div>
</div>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

• object 是物件資料，value 是物件內每個屬性的值
• 可以帶入第二個參數-屬性名稱 key (optional)
• 可以帶入第三個參數-索引值 index (optional)

物件的巡覽是使用 Object.keys() ， 它不保證順序會跟原本的相同，例如 Object.keys({2: 'two', 0: 'zero', 1: 'one' }) 出來的結果會是 [ "0", "1", "2" ] ，因此 v-for 不能保證其順序。

常數範圍

<div>
  <span v-for="n in 10">{{ n }}</span>
</div>

• 10 : 範圍定義。
• n : 目前所在的數字。

<template>

v-for 可以使用 <template> 一次渲染多個元素。

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

使用 :key 屬性決定復用行為

當 v-for 的陣列或是物件改變時， Vue 會去比對修改前及修改後的元素是否可以復用，以復用元素的方式減少建立及銷毀元素增加效能。

這時加上 key 屬性可以讓 Vue 有個依據來辨識每個節點，因此在使用 v-for 的時候最好為每個節點加上 key 屬性，並且每個節點的 key 值最好是唯一。

不要使用物件或陣列等非基本類型值作為 v-for 的 key。請用字串或數值類型的值。

顯示過濾 / 排序結果

v-for 迭代的資料可以為使用 computed 或 methods 處理後的結果。

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

但如果資料是需要巢狀使用 v-for 的話，computed 就派不上用場了，因為 computed 只能設定實體中的資料屬性，這時可以使用 methods 來達成需求。

<ul v-for="set in sets">
  <li v-for="n in even(set)">{{ n }}</li>
</ul>

data: {
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

v-for 與 v-if 一起使用

當它們處於同一節點，v-for 的優先級比 v-if 更高，這代表 v-if 將分別重複運行於每個 v-for 迴圈中。

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

不推薦在同一元素上使用 v-if 和 v-for。更多細節可參考風格指南。

參考資料

• Vue.js - List Rendering
• Vue.js: 列表渲染 v-for
• Vue.js Core 30天屠龍記(第13天): 列表渲染