微信小程式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>