站長(zhǎng)資訊網(wǎng)
目前可以理解為遍歷數(shù)組或元素中的唯一標(biāo)識(shí)，增加或刪減元素時(shí)，通過(guò)這個(gè)唯一標(biāo)識(shí)key判斷是否是之前的元素，并且該元素key的值是多少。這個(gè)唯一標(biāo)識(shí)是保持不變的。
Vue中為v-for提供了一個(gè)屬性，key： （推薦學(xué)習(xí)：phpstorm）
key屬性可以用來(lái)提升v-for渲染的效率！vue不會(huì)去改變?cè)械脑睾蛿?shù)據(jù)，而是創(chuàng)建新的元素然后把新的數(shù)據(jù)渲染進(jìn)去
在使用v-for的時(shí)候，vue里面需要我們給元素添加一個(gè)key屬性，這個(gè)key屬性必須是唯一的標(biāo)識(shí)
給key賦值的內(nèi)容不能是可變的
1. 在寫v-for的時(shí)候，都需要給元素加上一個(gè)key屬性
2. key的主要作用就是用來(lái)提高渲染性能的！
3.key屬性可以避免數(shù)據(jù)混亂的情況出現(xiàn) （如果元素中包含了有臨時(shí)數(shù)據(jù)的元素，如果不用key就會(huì)產(chǎn)生數(shù)據(jù)混亂）
<!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>
