v-for中为什么要有key属性
v-for中为什么要有key属性？？？这是听一个视频中讲的，之前一直不太明白key是干嘛用的当vue中使用v-for正在更新已经渲染过的元素序列时，它默认用“就地复用”策略，如果数据项的顺序被改变，vue不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素我们来举一个例子<body><div id="ap...
·
v-for中为什么要有key属性？？？
这是听一个视频中讲的，之前一直不太明白key是干嘛用的
当vue中使用v-for正在更新已经渲染过的元素序列时，它默认用“就地复用”策略，如果数据项的顺序被改变，vue不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素
我们来举一个例子
<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>
当点击添加的时候会在顶部添加一条数据
在没有key属性的情况下，我们选中1005这一条数据，并且添加一条1006的数据，结果就会变成这样:
让我们加入key属性
<div v-for="item in list" :key="item.count">
<input type="checkbox">{{item.count}}---{{item.name}}
</div>
注意
- v-for循环的时候，key属性只能使用number/string
- key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)