Vue中的v-for循環(huán)key屬性注意事項(xiàng)小結(jié)
當(dāng)Vue用 v-for 正在更新已渲染過的元素列表是，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue將不是移動(dòng)DOM元素來匹配數(shù)據(jù)項(xiàng)的改變，而是簡單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過的每個(gè)元素。
為了給Vue一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一 key 屬性。key屬性的類型只能為 string或者number類型。
在下面這個(gè)例子中，如果不給 p 元素綁定key，我先選中第一個(gè)，
然后輸入ID和Name，點(diǎn)擊添加按鈕之后，就會出現(xiàn)如下這種情況，剛添加的元素被選中。如果綁定了key屬性，則不會出現(xiàn)這種情況。
完整的代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id='app'>
<!--v-for循環(huán)普通數(shù)組-->
<div>
<label>ID:<input type="text" v-model="id"></label>
<label>Name:<input type="text" v-model="name"></label>
<input type="button" value="添加" @click="add" />
</div>
<!--注意：v-for循環(huán)的時(shí)候，key屬性只能使用number或string -->
<!--注意：key使用的時(shí)候，必須使用v-bind綁定屬性的形式，指定key的值 -->
<!-- 在組件中，使用 v-for循環(huán)的時(shí)候，或者在一些特殊情況中，如果v-for有問題，
必須在使用v-for的同時(shí)，指定唯一的 字符串/數(shù)字 類型:key 值-->
<p v-for="item in list" :key="item.id">
<input type="checkbox"/>
{{item.id}}--{{item.name}}
</p>
</div>
</body>
<script src="vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
id:"",
name:"",
list:[
{id:1, name:'李斯'},
{id:2, name:'嬴政'},
{id:3, name:'趙高'},
{id:4, name:'韓非'},
{id:5, name:'荀子'},
],
},
methods:{
add(){
this.list.unshift({id:this.id,name:this.name});
}
}
});
</script>
</html>
總結(jié)
以上所述是小編給大家介紹的Vue中的v-for循環(huán)key屬性注意事項(xiàng)小結(jié)，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時(shí)回復(fù)大家的！
相關(guān)文章
淺談Vue中的this.$store.state.xx.xx
這篇文章主要介紹了Vue中的this.$store.state.xx.xx用法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-09-09
Vue3 defineProps設(shè)置默認(rèn)值報(bào)錯(cuò)問題及解決過程
這篇文章主要介紹了Vue3 defineProps設(shè)置默認(rèn)值報(bào)錯(cuò)問題及解決過程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-08-08
vue.js移動(dòng)端tab組件的封裝實(shí)踐實(shí)例
本篇文章主要介紹了vue.js移動(dòng)端tab的封裝實(shí)踐實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
在vue中解決提示警告 for循環(huán)報(bào)錯(cuò)的方法
今天小編就為大家分享一篇在vue中解決提示警告 for循環(huán)報(bào)錯(cuò)的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue全局使用less樣式,組件使用全局樣式文件中定義的變量操作
這篇文章主要介紹了Vue全局使用less樣式,組件使用全局樣式文件中定義的變量操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
前端使用vue點(diǎn)擊上傳文件傳送給后端并進(jìn)行文件接收的方法
這篇文章主要介紹了如何在前端和后端實(shí)現(xiàn)文件傳輸,前端使用Vue.js發(fā)送文件,后端使用Java接收文件并處理,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
這篇文章主要介紹了在IDEA中安裝vue插件全過程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要給大家介紹了關(guān)于vue中如何自定義右鍵菜單的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
Vue Element前端應(yīng)用開發(fā)之樹列表組件
本篇隨筆主要介紹樹列表組件和下拉列表樹組件在項(xiàng)目中的使用，以及一個(gè)SplitPanel的組件。2021-05-05
Vue前端開發(fā)中表單組件是排在前三的高頻使用的組件,下面這篇文章主要給大家介紹了關(guān)于vue可視化表單設(shè)計(jì)器自定義組件使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12