1. wx:for

Bind an array on a component using the 'wx:for' control property to render the component repeatedly using the data for the items in the array.

The default variable name of the current item of the default array defaults to 'index', and the variable name of the current item of the array defaults to 'item'

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

Use 'wx:for-item' to specify the variable name of the current element of the array,

Use 'wx:for-index' to specify the variable name of the array's current subscript:

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

'wx:for' can also be nested, with a nine-nine multiplication table below

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

2. block wx:for

Similar to 'block wx:if', you can also use 'wx:for' on the '' tag to render a multi-node block of structures. For example:

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

3. wx:key

If the position of an item in the list changes dynamically or a new item is added to the list, and you want the items in the list to maintain their own characteristics and state (such as input content, the selected state of 'switch'), you need to use 'wx:key' to specify a unique identifier for the items in the list.

The value of 'wx:key' is provided in two forms

1. A string that represents a property of an item in the array of the for loop, the value of which needs to be the only string or number in the list and cannot be changed dynamically.
2. The reserved keyword '*this' represents the item itself in the for loop, which requires that the item itself be a unique string or number.

When a data change triggers a render layer to re-render, components with key are corrected, and the framework ensures that they are reordered rather than recreated to ensure that the components remain in their state and to improve the efficiency of list rendering.

If you don't provide 'wx:key', a 'warning' is reported, and you can choose to ignore it if you know that the list is static, or if you don't have to pay attention to its order.

4. Sample code

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>

<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>

Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ],
    numberArray: [1, 2, 3, 4]
  },
  switch: function(e) {
    const length = this.data.objectArray.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.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addNumberToFront: function(e){
    this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
    this.setData({
      numberArray: this.data.numberArray
    })
  }
})

5. Precautions

When the value of 'wx:for' is a string, the string is parsed into an array of strings

<view wx:for="array">
  {{item}}
</view>

Equivalent to

<view wx:for="{{['a','r','r','a','y']}}">
  {{item}}
</view>

Please note

If there is a space between the curly braces and quotation marks, it will eventually be parsed as a string

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

Equivalent to

<view wx:for="{{[1,2,3] + ' '}}" >
  {{item}}
</view>