v-for循环中 ,key怎么完全不起作用?

我的顺溜之 前端之路(急难千金方(个人版/滑稽脸)----------)

今天写v-for循环时候,使用key来保证数据的唯一性
却发现数据变动时候,我的Key并未生效。
没图不太直观

(盗图自简书65_刘璐)盗图自简书65_刘璐
如上所示数据变动前的abcd和变动后的abcd,不加key的话二者之间的联系就是一种数组内的对位联系(新旧数组索引相同处),加了key之后,就能把数据准确对应联系起来。

一般key 的选用最好是 数字/字符串 形式。

但是 (划重点)我的理解是 key必须要使用你想确定的数据中的独有数据

什么是独有数据 简单来说 就像 身份证

你要确保更改前后的这两个数据的唯一性 你必须让他们掏出同一张身份证

实践一下,这里我选择 key 为 id
此时chara数组中的id出现了重复
(此时chara数组中的id出现了重复)
我再向数组中添加 具有重复id为2的数据
(我再向数组中添加 具有重复id为2的数据)

看一下页面把

我先勾选了chara数组中的索引位置为2的数据
(我先勾选了chara数组中的索引位置为2的数据)

输入奥特特曼 点击添加在第三位
勾选项变成了奥特曼,就明明没有决定是你
(勾选项变成了奥特曼,就明明没有决定是你)

如此说明,key 选取的 一定要保证它是各个数据中的特有值。

ps,千万不要把 key值选作索引 key选作索引结果就是 “我既不报错更不生效”

错误示范:v-for="(value,index) in Array" :key=“index” ;

每次更新数组 索引都在变的呀 默认不加key就是按照索引值来联系数据的呀

对了,我一开就是用 索引这个二五仔 才整的这么一出

以上。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值