## Vue指令之`v-for`和`key`屬性 **1. 迭代數組** ``` <!-- 循環遍歷對象身上的屬性 --> <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div> ``` **2. 迭代數組對象中的屬性** ~~~ <ul> <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年齡：{{item.age}}</li> </ul> ~~~ ``` var vm = new Vue({ el: '#app', data: { list: [ { id: 1, name: 'zs1' }, { id: 2, name: 'zs2' }, { id: 3, name: 'zs3' }, { id: 4, name: 'zs4' } ] }, methods: {} }); ``` **3. 迭代數字** ~~~ <p v-for="i in 10">這是第 {{i}} 個P標簽</p> ~~~ ### **v-for 時，key 現在是必須的。** 當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用 “**就地復用**” 策略。如果數據項的順序被改變，Vue將**不是移動 DOM 元素來匹配數據項的順序**， 而是**簡單復用此處每個元素**，并且確保它在特定索引下顯示已被渲染過的每個元素。 為了給 Vue 一個提示，**以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素**，你需要為每項提供一個唯一 key 屬性。 1. 注意： v-for 循環的時候，key 屬性只能使用 number獲取string 2. 注意： key 在使用的時候，必須使用 v-bind 屬性綁定的形式，指定 key 的值 3. 在組件中，使用v-for循環的時候，或者在一些特殊情況中，如果 v-for 有問題，必須 在使用 v-for 的同時，指定 唯一的 字符串/數字 類型 :key 值 ``` <p v-for="item in list" :key="item.id"> <input type="checkbox">{{item.id}} --- {{item.name}} </p> ```