条件渲染

可以将一个数组内的所有数据依次展示在界面上。
常用场景:文字列表、商品列表。

1、列表渲染:

在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

2、多个组件的控制:

使用辅助标签<block>对多个组件进行控制。

3、指定循环变量名:

使用wx:for-item可以指定数组当前元素的变量名;
使用wx:for-index可以指定数组当前下标的变量名。

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

4、wx:key的使用:

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如<input/>中的输入内容,<switch/>的选中状态),需要使用wx:key来指定列表中项目的唯一的标识符。
用于提升数组内部分数据变更时列表渲染的效率。

推荐阅读更多精彩内容