vue v-for 使用:key属性识别DOM

最新推荐文章于 2025-07-06 22:51:21 发布

chenqiong1991

最新推荐文章于 2025-07-06 22:51:21 发布

阅读量917

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vuejs 技术杂项

本文链接：https://blog.csdn.net/chenqiong1991/article/details/88393736

技术杂项同时被 2 个专栏收录

10 篇文章

订阅专栏

vuejs

1 篇文章

订阅专栏

在Vue中，为v-for指令添加:key属性至关重要，因为它帮助Vue准确识别DOM元素。当列表数据变动时，没有正确key的情况会导致错误的DOM渲染，例如勾选状态跟随错误的项。通过设置唯一key，可以确保在删除或添加元素时，组件的状态能正确更新，防止因DOM复用导致的意外行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

添加 :key 属性可以让vue识别DOM哪个是哪个

上图中，列表DOM每一项有复选框，勾选状态代表了DOM自身在列表中的位置。
现更新列表数据，以查看勾选项是否可以正确渲染。

在这里插入图片描述
先勾选第三项，再删除第三项。正确的DOM渲染应该是只留下了1 2 4项，且每一项都未勾选。
实际结果：

实际结果显示，如果没有正确的key属性（下方所示），勾选的项目会被认为是列表第三项，移除第三项后，第四项变成了第三项，所以导致错误地渲染了第四项的勾选状态。

同样，如果在列表前追加项目，也会导致同样的DOM渲染错误：
在这里插入图片描述
它仍然会认为第三项被勾选了。所以不管这个列表如何变化，都是固定的第三项保持勾选状态，这是不符合正常DOM结构的。

关键代码：

<div id="app">
  <button @click="add">has key</button>
  <button @click="remove1">has key remove</button>
  <div v-for="(item,idx) in ds" :key="item.id"> 
    <input type="checkbox">
    <span>{{item.id}}::{{item.str}}</span>
  </div>
  <hr><hr><hr><hr>
  <button @click="add2">no key</button>
  <button @click="remove2">no  key remove</button>

  <div v-for="(item,idx) in ds2" ><input type="checkbox"> {{item.id}}::{{item.str}}</div>
</div>


var app = new Vue({
 el: '#app',
 data: {
   ds: [{id:1,str:"s"},{id:2,str:"ss"},{id:3,str:"sss"},{id:4,str:"ssss"}],
   ds2: [{id:1,str:"s"},{id:2,str:"ss"},{id:3,str:"sss"},{id:4,str:"ssss"}],
   count1:5,
   count2:5
 },
 methods:{
   add(){
     this.ds.unshift({id:this.count1,str:"lkjlj"})
     this.count1++
   },
   add2(){
     this.ds2.unshift({id:this.count2,str:"lkjlj"})
     this.count2++
   },
   remove1(){
     this.ds.splice(2,1)
   },
   remove2(){
     this.ds2.splice(2,1)
   }
 }
})