vue指令之v-for

首先創建自定義組件（practice5.vue）：

<!--* @Author: RealRoad1083425287@qq.com* @Date: 2024-07-05 21:28:45* @LastEditors: Mei* @LastEditTime: 2024-07-05 21:35:40* @FilePath: \Fighting\new_project_0705\my-vue-app\src\components\practice5.vue* @Description: * * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template><div><div id="myList" v-for="(item,index) in arr" :key="index">{{ item.name }}</div></div></template><script>
//列表渲染
//為什么循環的時候需要加key
//1.key的作用主要是為了高效的更新虛擬Dom，提高渲染性能
//2.key屬性可以避免數據混亂的情況出現
export default{data(){return{arr:[{name:"張三"},{name:"李四"},{name:"王五"}]}}
}</script><style scoped>
#myList{color: blue;background-color: yellow;margin-top: 20px;
}
</style>

然后再App.Vue中進行引入使用

最后運行結果為：

在使用v-for渲染列表時有幾個注意點：

①循環的時候需要加key
1、作用
1.key的作用主要是為了高效的更新虛擬DOM，提高渲染性能。
2.key屬性可以避免數據混亂的情況出現。
2、原理
1.vue實現了一套虛擬DOM，使我們可以不直接操作DOM元素只操作數據，就可以重新渲染頁面，而隱藏在背后的原理是高效的Diff算法
2.當頁面數據發生變化時，Diff算法只會比較同一層級的節點；
3.如果節點類型不同，直接干掉前面的節點，再創建并插入新的節點，不會再比較這個節點后面的子節點；如果節點類型相同，則會重新設置該節點屬性，從而實現節點更新
4.使用key給每個節點做一個唯一標識，Diff算法就可以正確識別此節點，"就地更新"找到正確的位置插入新的節點
3、注意
1.key 的值只能是字符串或數字類型
2. key 的值必須具有唯一性（即：key 的值不能重復）
3.建議把數據項 id 屬性的值作為 key 的值（因為 id 屬性的值具有唯一性）
4.使用 index 的值當作 key 的值沒有任何意義（因為 index 的值不具有唯一性，實際項目中如果沒有id，推薦使用index）
5.建議使用 v-for 指令時一定要指定 key 的值（既提升性能、又防止列表狀態紊亂）

所以，簡而言之，在實際的開發中，上面的數組列表一般是后端返回出來的數據，我們需要使用v-for將這些數據進行渲染，但是在使用v-for的時候也必須要加key，并且key的取值要有唯一性，一般都是數據的ID，比如學生列表的學生ID，或商品列表中的商品ID。這樣我們在操作這個列表中就不會出現數據混亂的情況。