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