目前可以理解為遍歷數組或元素中的唯一標識,增加或刪減元素時,透過這個唯一標識key判斷是否是先前的元素,並且該元素key的值是多少。這個唯一識別是保持不變的。
Vue中為v-for提供了一個屬性,key: (推薦學習:storm##))##key屬性時可以用##來提升v-for渲染的效率! vue不會去改變原有的元素和數據,而是創建新的元素然後把新的數據渲染進去
在使用v-for的時候,vue裡面需要我們給元素添加一個key屬性,這個key屬性必須是唯一的識別
給key賦值的內容不能是可變的1. 在寫v-for的時候,都需要給元素加上一個key屬性
2. key的主要功能就是用來提升渲染效能的!
3.key屬性可以避免資料混亂的情況出現 (如果元素中包含了有臨時資料的元素,如果不用key就會產生資料混亂)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="item in teachers" :key="item.id">{{ item.name }} <input type="text"></li> </ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { teachers: [ { id: 1, name: "aaa" }, { id: 2, name: "bbb" }, { id: 3, name: "ccc" }, { id: 4, name: "ddd" } ] } }); </script> </body> </html>
以上是v-for key的作用的詳細內容。更多資訊請關注PHP中文網其他相關文章!