v-for詳解

v-for的引入

• 當我們需要對一組數據進行渲染時，我們就可以使用v-for來完成

v-for遍歷數組

• 格式：v-for="(item, index) in items"。（也許是因為item顯得更加重要，所以將item排在前面）
  • 格式說明：index為可選參數，當不需要獲取每一項的索引值時，可以省略index

<ul>
    <li v-for="(item,index) in anime">{{index+1}}-{{item}}</li>
</ul>

data: {
    anime: ['進擊的巨人', '狐妖小紅娘', '天寶伏妖錄', '東京食屍鬼'],

v-for遍歷對象

• 格式：v-for="(value, key, index) in info"。（參數按照重要程度排序）
  • 參數說明：key和index為可選參數

<ul>
    <li v-for="(value,key) in info">{{key}}:{{value}}</li>
</ul>

data: {
    info: {
        name: "super咖啡",
        age: 21,
        height: 1.68
     }

v-for遍歷數字

• 格式：v-for="count in counts"
• 注意：如果使用v-for迭代數字的話，前面 count 的值從 1 開始

<p v-for="count in 10">這是第{{count}}次循環</p>

v-for的key屬性

• 在我們使用v-for時，建議給對應的元素或組件添加一個key屬性
• 為何要添加一個key屬性？主要目的就是為了高效的更新虛擬DOM

• 假設要在一個節點列表abcde的bc之間插入一個新節點f.在添加key屬性前，diff算法默認是將c更新成f，d更新成c，e更新成d，最后再插入e

  

• 而在添加key屬性后，key為每一個節點做了一個標識，diff算法可以准確高效的在要求的位置插入新節點

  

• 為key賦的值必須要與元素具有一一對應的關系

<li v-for="(item,index) in anime" :key="item">{{index+1}}-{{item}}</li>