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


Posted by yuhantaiwan on 2020-05-31

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-forkey。請用字串或數值類型的值。

顯示過濾 / 排序結果

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

<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-forv-if 一起使用

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

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

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

參考資料


#w3HexSchool #Vue #javascript







Related Posts

Leetcode 刷題 pattern - Next Greater Element

Leetcode 刷題 pattern - Next Greater Element

Web Accessibility 的重要性

Web Accessibility 的重要性

詳解簡易 Timer 來學習 D3

詳解簡易 Timer 來學習 D3



Comments