当前位置: 首页> 娱乐> 八卦 > 【Vue】v-for中的key

【Vue】v-for中的key

时间:2025/7/10 17:57:59来源:https://blog.csdn.net/qq_39921135/article/details/139296085 浏览次数:0次

文章目录

  • 一、引入问题
  • 二、分析问题

一、引入问题

语法key属性 = "唯一值"

作用:给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用

为什么加key:Vue 的默认行为会尝试原地修改元素(就地复用

小黑的书架案例为例,如果点击了第一个元素的删除按钮,我们就会认为第一本书就会从页面中移除

但是大家脑海中的效果是加了key的效果。

如下图,点击第一个带有背景色的li,删除后第一个li还在。由此可见这个li压根没动,动的是里面的文字内容。

image-20240529144958396


二、分析问题

当我们加了key,可以理解为给列表的每个li都加了一个唯一标识,当我点击删除的时候确实数据中把这一项删了,但是由于我给每个key都加了一个唯一标识,所以当我发现数据中剩下这三项,此时它就可以非常精准的定位到页面中剩下的其实是下面这三个li是我需要的,而第一个li实际上不存在了。

image-20240529145340003

如果没加key,官网有这么一句话:v-for的默认行为会尝试原地修改元素(就地复用)

如果不加key,就相当于把最后一个删除了,而其他的都是原地修改标签里的值。

实例代码:

<ul><li v-for="(item, index) in booksList" :key="item.id"><span>{{ item.name }}</span><span>{{ item.author }}</span><button @click="del(item.id)">删除</button></li>
</ul>

注意:

  1. key 的值只能是字符串 或 数字类型
  2. key 的值必须具有唯一性
  3. 推荐使用 id 作为 key(唯一),不推荐使用 index 作为 key(会变化,不对应)
关键字:【Vue】v-for中的key

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: