小程序 – WXML – 循环渲染wx:for

简介

小程序中循环的使用方法，和 Vue 中的 v-for() 一样，小程序中使用 wx:for .

循环渲染

wx:for

通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：

<view wx:for="{{ array }}">
    索引是： {{ index }}   当前项是：{{ item }}
</view>

小程序中，默认把循环项名为 item ,默认索引名为index

手动指定索引名和循环项变量名

使用 wx:for-index 可以指定当前循环项的索引的变量名

使用 wx:for-item  可以指定当前项的变量名

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

wx:key 的使用

类似于 Vue 列表渲染中的 :key ，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而提高渲染的效率。

<view wx:for="{{ objArray }}" wx:key="id">
    索引是： {{ idx}}   当前项是：{{ item.name }}  当前id是：{{ id }}
</view>

注意：wx:key 的值会引用 item 中的 id.但不需要使用 {{ id }} 这种语法