v-for中为什么要有key属性
生活随笔
收集整理的這篇文章主要介紹了
v-for中为什么要有key属性
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
v-for中為什么要有key屬性？？？
這是聽(tīng)一個(gè)視頻中講的，之前一直不太明白key是干嘛用的
當(dāng)vue中使用v-for正在更新已經(jīng)渲染過(guò)的元素序列時(shí)，它默認(rèn)用“就地復(fù)用”策略，如果數(shù)據(jù)項(xiàng)的順序被改變，vue不是移動(dòng)DOM元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序，而是簡(jiǎn)單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過(guò)的每個(gè)元素
我們來(lái)舉一個(gè)例子
<body><div id="app"><label >count:</label><input type="text" v-model="count"><label >name:</label><input type="text" v-model="name"><input type="button" value="添加" @click="add"><div v-for="item in list"><input type="checkbox">{{item.count}}---{{item.name}}</div></div><script>var vm=new Vue ({el: '#app',data: {count:'',name:'',list:[{count:1001,name:'aaa'},{count:1002,name:'bbb'},{count:1003,name:'ccc'},{count:1004,name:'ddd'},{count:1005,name:'eee'}]}, methods: {add () {let p={count:this.count,name:this.name}this.list.unshift(p)}}})</script>
當(dāng)點(diǎn)擊添加的時(shí)候會(huì)在頂部添加一條數(shù)據(jù)
在沒(méi)有key屬性的情況下，我們選中1005這一條數(shù)據(jù)，并且添加一條1006的數(shù)據(jù)，結(jié)果就會(huì)變成這樣:
讓我們加入key屬性
<div v-for="item in list" :key="item.count"><input type="checkbox">{{item.count}}---{{item.name}} </div>
注意
- v-for循環(huán)的時(shí)候，key屬性只能使用number/string
- key在使用的時(shí)候，必須使用v-bind屬性綁定的形式，指定key的值
總結(jié)
以上是生活随笔為你收集整理的v-for中为什么要有key属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 关于MVVM与MVC
- 下一篇： 微信小程序编译 tunneling so