wx:key的使用及wx:key的值

本文详细介绍了在微信小程序中wx:key属性的两种用法:通过指定字符串来引用数组元素中的唯一标识符属性,以及使用*this来直接引用数组元素本身。这两种方式有助于提高列表渲染效率并确保组件更新的正确性。

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

1:wx:key="字符串"

这个”字符串”代表在 for 循环的 array 中 item 的某个“属性”
该“属性” 的值需要是列表中唯一的字符串或数字,且不能动态改变。
用于被遍历的组件需要多个属性的时候。

 
  1. //test.js
  2. data: {
  3. input_data: [
  4. { id: 1, unique: "unique1" },
  5. { id: 2, unique: "unique2" },
  6. { id: 3, unique: "unique3" },
  7. { id: 4, unique: "unique4" },
  8. ]
  9. }
  10. //test.wxml
  11. <input value="id:{{item.id}}" wx:for="{{input_data}}" wx:key="unique" />

2:wx:key="*this"

保留关键字”*this”代表在 for 循环中的 item 本身,
这种表示需要 item 本身是一个唯一的字符串或者数字
用于组件仅需要一个属性,且属性值唯一。

 
  1. //test.js
  2. data: {
  3. numberArray: [1, 2, 3, 4],
  4. stringArray:['aaa','ccc','fff','good']
  5. }
  6. //test.wxml
  7. <input value="id:{{ item }}" wx:for="{{numberArray}}" wx:key="*this" />
  8. <input value="id:{{ item }}" wx:for="{{stringArray}}" wx:key="*this" />
  9. },
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值