v-for指令可以用來遍歷數組/對象
它可以根據data中數據的更新動態刷新視圖
1. 遍歷數組
1.1 使用方式: v-for="item in arr" item是一個參數,表示數組中的每一項,arr也是一個參數,表示你要遍歷的數組
1.2 使用方式: v-for="(item, index) in arr" index表示數組項的索引 ⭐
2. 遍歷對象
2.1 使用方式:v-for="value in obj" value 表示對象的屬性的值 obj就是需要遍歷的對象
2.2 使用方式:v-for="(value, key, index) in obj" key表示對象的鍵 index表示這個對象屬性的索引,類似上面的數組的index
注意:使用下面兩種方式不能夠動態刷新視圖
1. 使用數組的length屬性去更改數組的時候不行
2. 使用索引的方式去更改數組也不行
解決方式:
1. Vue.set(arr, index, value)方法 arr:表示需要設置的數組,index表示數組索引,value表示該索引項的新的值⭐,例如:Vue.set(vm.list, 0, {id: 111, name: 'jack'})
2. 直接調用數組的splice()方法
注意: 使用v-for渲染數據的時候,一定要記得將key屬性加上去, 並且要保證這個key的值是唯一並且不重復的,它的作用就是用來唯一標識數據的每一項,提高渲染性能⭐
