读书笔记.关于微信小程序wx:for中的key的问题为什么要设置

最新推荐文章于 2024-03-25 16:00:45 发布
最新推荐文章于 2024-03-25 16:00:45 发布
阅读量557 收藏
点赞数
文章标签： 小程序 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42908259/article/details/106084138
版权

没key的问题
当有3个按钮比如
在这里插入图片描述
代码

{{item}} 增加节点 data: { switchData:['a','b','c'] }, 加给按钮改变数组 this.data.switchData.push('d'); this.setData( { switchData: this.data.switchData } ); 打开前面的按钮 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200512202454934.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTA4MjU5,size_16,color_FFFFFF,t_70) 在点击增加 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200512202521626.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTA4MjU5,size_16,color_FFFFFF,t_70) 从数组尾部增加没有问题 当像数组前增加 this.data.switchData.unshift('d'); this.setData( { switchData: this.data.switchData }

在这里插入图片描述
就会出现d选中现像。
为什么呢?
小程序也是diff算法会复用 先前的节点默认没有数组key的话是a:0b:1c:2
增加了d这个节点变成了虚拟dom里面变成了d:0,a:1,b,1c:2;根据diff算法是逐层比较的
现在olddom里面a:0b:1c:2变成了d;0,a:1,b:2,在创建c：2；diff结束所以出现问题，我们可以设置为一的key

summer breeze
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
mpvue小程序中v-for同一接口实现循环嵌套
小柠檬爱编程
12-04 631
在使用mpvue开发小程序时，嵌套使用v-for循环，没用到index索引，报错： 同一组件内嵌套的 v-for 不能连续使用相同的索引,目前为: index,index 解决方法: 重新定义第二个for循环中的index就可以啦 <div class="item" v-for="(item,index) in tableData" :key="index"> <div class="introduce"> <div class=".
在同一个模板里面是不能出现相同key值的
myazwj的博客
10-26 231
今天写案例然后在一个模板下循环了两次，然后加了两次相同key，所以出现下面的报错 解决的方法是： 在vue中，同一组件中兄弟元素之间使用for循环遍历数组， 每一个for的key值不能使用下标来表示，不然这样会出现以上这样的错误，也就是出现重复键的问题： 可以使用给每个可以加上一定的数值或字符来标记不同 例：index+10 或者 index+'r' ---------- for会给每个数组添加唯一的表示id -------- ...
uniapp 小程序双重v-for 的key bug
草莓Sir的博客
07-16 2068
uniapp 双重v-for 问题描述 在uniapp小程序中，在使用v-for构建双重循环的时候，出现bug，如下: VM8129:1 thirdScriptError Cannot read property ‘2’ of undefined; [Component] Event Handler Error @ pages/appointment/index#nt TypeError: Cannot read property ‘2’ of undefined 问题分析 双重循环，key绑定的
2022/2/24 template上使用v-for时报错解决
Zhang_aichi的博客
03-09 2009
将 v-for 写在 template上时，template上不能使用key, 但 v-for 必须要指定key，所以循环遍历的元素上，需要加上key (key是唯一标识，不允许重复) 同一标签上，不能同时使用v-for和v-if，怎么办？ <ul> <template v-for="(item,index) in ['国庆节', '春节', '元旦']"> <li v-if="item !== '春节'" :key="index">{{
vue v-for key错误
qq_31889029的博客
11-13 469
写了两个一样的for循环，绑定的key相同。 <div class="info" v-for="(item, index) in itemList" :key="index"></div> <div class="info" v-for="(item, index) in itemList" :key="index"></div> 可以修改其中一个...
200个微信小程序案例源码可运行.zip
06-09
微信小程序demo: todo: wx.setStorageSync(KEY,DATA) 方法存放数据 微信小程序demo: V2EX (11月9日版) 微信小程序demo:百思不得姐 微信小程序demo:百思不得姐:使用不得姐api 微信小程序demo:柏拉图测试:趣味图片生成...
微信小程序学习笔记之本地数据缓存功能详解
01-20
微信小程序的本地数据缓存功能是开发者在设计和构建微信小程序时经常需要用到的一个关键特性，它允许应用程序在本地存储和检索数据，以提高用户体验并减少网络请求。在本文中，我们将深入探讨如何使用微信小程序提供...
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
01-20
本文将详细讲解如何在微信小程序中通过两种方式实现这一目标：使用`navigator`组件和使用`wx.navigateTo` API。 **方法一：使用navigator组件跳转传参** 在微信小程序中，`navigator`组件用于实现页面间的跳转。在...
微信小程序学习笔记之登录API与获取用户信息操作图文详解
10-17
在微信小程序开发中，登录和获取用户信息是关键步骤，为用户提供个性化服务和安全保障。本文将详细介绍微信小程序的登录API和获取用户信息的操作流程。 首先，登录过程涉及到的主要API是`wx.login()`。这个方法用于...
微信小程序实现多图上传
01-19
本文实例为大家分享了微信小程序实现多图上传的具体代码，供大家参考，具体内容如下 前言 纯属是笔记，复用性太高，前后端封装的上传的多图方法 看一下效果图 index.html <block wx:for={{ wx:key={{> <...
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
11-20
前言： 微信小程序的循环实现，通过wx:for 与 wx:for-items 与 wx:key,那么他的主要使用特点是什么呢？ 1 wx:for 从目前的例子看，wx:for 的使用确实是对数组来做的，参考微信icon示例程序。 示例里面都是对数组进行条件判断，比如iconsizejius就是一个典型的数组。 2 wx:for-items 与wx:for-item 2.1 wx:for-items 现在看wx:for-items， 和wx:for比，wx:for-items有什么不同呢？ 【案】笔者认为wx:for-items应该可以包容wx:for，而不是像有些朋友说，wx:for用于数
uni-app运行到H5正常，但运行到小程序不正常、报错总结
YZRHANYU的博客
10-07 3993
uni-app运行到H5正常，但运行到小程序不正常、报错总结
记录一个bug ，在uniapp开发微信小程序中，使用v-for 设置key时如果key值不唯一，会导致一些问题！！
柑橘乌云_
06-16 342
在uniapp开发微信小程序中，使用v-for 设置key时如果key值不唯一，然后在循环中有个dom上加了点击事件参数时这个item，那么那个点击事件函数里面打印item是undefined的！
mpvue - 报错：同一组件内嵌套的 v-for 不能连续使用相同的索引,目前为: index,index
idomyway的博客
08-30 3319
前言     在使用mpvue开发小程序的时候，嵌套使用for循环进行渲染，但是没用用到index索引，报错同一组件内嵌套的 v-for 不能连续使用相同的索引,目前为: index,index 原因     在mpvue中，v-for如果不定义index字段，默认就是index，多层v-for嵌套时候就会报这个错误，...
微信小程序 wx:key详细介绍
sunny_xcy的博客
08-14 1906
微信小程序 wx:key 在自己学习的时候不是多明白到底是怎么回事，经过上网查阅资料，整理下：   个人感觉官方给出的例 子不是很明确，官方解释如下： wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容， 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。 wx:key 的值以
小程序for循环中key值的作用？
zybijiso666的博客
12-30 879
识别列表项的唯一性：当在列表渲染时使用 for 循环，每个列表项都应该具有一个唯一的 key 值。这个 key 值用于帮助小程序识别每个列表项的唯一性，以便在列表发生变化时进行高效的更新。实现列表项的局部更新：当列表中的某个项发生变化时，通过提供 key 值，小程序可以判断出哪些列表项需要重新渲染，而哪些列表项只需要局部更新。总之，key 值在小程序 for 循环中起到了标识列表项唯一性和实现局部更新的重要作用，帮助小程序进行高效的列表渲染和更新。数组，并为每个列表项设置唯一的。
小程序v-for与key值使用
weixin_59525879的博客
09-09 1108
在数据更新时，如果没有提供“key”属性，则小程序框架会尝试使用每个项的索引作为标识，这可能会导致不必要的性能开销和渲染问题。属性的作用是用来区分每个循环项的标识，这样可以提高性能，防止重复渲染和更新数据。因此，对于一般的列表循环渲染，建议给每个循环项一个唯一的。如果数据中没有唯一的标识，则可以使用。值，但是此方法的性能可能会受到一些影响。为每个数据项的唯一标识。用于给每个循环项分配一个唯一的标识。与Vue中的用法基本相同。
微信小程序使用for循环报错：wx:key=“{{id}}“ does not look like a valid key name (did you mean wx:key=“id“ ?)
最新发布
我是小鹏呀的博客
03-25 241
解决方法：循环的时候，绑定key去掉{{}}，变更前为wx:key="{{id}}"，变更后为wx:key="id"
微信小程序wx:for 的使用以及wx:key绑定
weixin_43364458的博客
03-05 6206
wx:for使用以及使用wx:key注意事项
掌握微信小程序开发：从页面结构到API详解
本篇前端学习笔记主要聚焦于微信...总结起来，本篇笔记为初学者提供了微信小程序开发的核心知识点，包括页面结构的定义、样式处理、逻辑交互的实现，以及关键配置的使用，对于理解和开发微信小程序具有很高的参考价值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值