wxml模板语法-列表渲染

wx:for

通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构

<view wx:for='{{array}}'>
    默认索引是：{{index}}, 默认项是：{{item}}
</view>

默认情况下，当前循环项的索引用index表示，循环项用item表示。可以通过手动指定索引和当前项的变量名：

• 使用wx:for-index指定索引的变量名
• 使用wx:for-item指定当前项的变量名

<view wx:for='{{array}}' wx:for-index='idx' wx:for-item='currentItem'>
    当前索引是：{{idx}},当前项是：{{currentItem}}
</view>

wx:key

类似vue中列表渲染中的 :key，为渲染的每一项指定唯一key值，从而提高渲染的效率

//data数据
data: {
    userList: [
        { id: 1, name: 'zs'},
        { id: 2, name: 'ls'},
        { id: 3, name: 'ww'},
    ]
}

//wxml结构
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>