(精华)2020年7月15日 微信小程序 wx:for的使用

144 阅读1分钟
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>
<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>
//
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
//*this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }],
    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]
  }
})

注意以下两点

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

等同于

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