1 wx:for
通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构。
默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。
<!--pages/list/list.wxml-->
<view wx:for="{
{arr}}">
索引：{
{index}} -- 当前项：{
{item}}
</view>
// pages/list/list.js
Page({
data: {
arr: [
'a',
'b',
'c',
'd',
'e',
'f',
]
}
})
2 手动指定索引和当前项的变量名
使用 wx:for-index 可以指定当前循环项的索引的变量名
使用 wx:for-item 可以指定当前项的变量名
<!--pages/list/list.wxml-->
<view wx:for="{
{arr}}" wx:for-index="idx" wx:for-item="content">
索引：{
{idx}} -- 当前项：{
{content}}
</view>
3 wx:key 的使用
类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而提高渲染的效率。
列表渲染中的key一般选用具有唯一性的id，不建议使用索引，因为不能进行唯一标识每一项，索引会根据数组中元素个数、位置的变化而改变(索引对应的项发生改变)。
<!--pages/list/list.wxml-->
<view
wx:for="{
{arr}}"
wx:for-index="idx"
wx:for-item="content"
wx:key="id"
>
id: {
{content.id}}
索引：{
{idx}} -- 当前项：{
{content.content}}
</view>
// pages/list/list.js
Page({
data: {
arr: [
{
id: 1, content: 'a'},
{
id: 2, content: 'b'},
{
id: 3, content: 'c'},
{
id: 4, content: 'd'},
{
id: 5, content: 'e'}
]
}
})
