微信小程序wx:key使用

demo.wxml :

<block wx:for="{{arr}}" wx:key="*this" wx:for-item="data" wx:for-index="idx">
  <view>
    <checkbox/>{{data}}</view>
</block>
<button bind:tap="sort">随机排序</button>
           

demo.js :

data: {
    arr: ['wxml', 'js', 'wxss', 'json']
  },
  sort() {
    const length = this.data.arr.length
    for (let i = 0; i < length; i++) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.arr[x]
      this.data.arr[x] = this.data.arr[y]
      this.data.arr[y] = temp
    }
    this.setData({
      arr: this.data.arr
    })
           

点击 随机排序 按钮，checkbox选中会跟随内容一起变化。

当我们使用的数组数据里有唯一的id，我们可以直接使用这个唯一的id。

我们的数组数据如下：

arrObj: [{
      id: 1,
      name: 'wxml'
    }, {
      id: 2,
      name: 'js'
    }, {
      id: 3,
      name: 'wxss'
    }, {
      id: 4,
      name: 'json'
    }],
           

重新编写sort方法：

sortObj() {
    const length = this.data.arrObj.length
    for (let i = 0; i < length; i++) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.arrObj[x]
      this.data.arrObj[x] = this.data.arrObj[y]
      this.data.arrObj[y] = temp
    }
    this.setData({
      arrObj: this.data.arrObj
    })
  },
           

wx:key直接使用id即可。

<block wx:for="{{arrObj}}" wx:key="id">
  <view>
    <checkbox/>{{item.name}}</view>
</block>
<button bind:tap="sortObj">随机排序</button>