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'} ] } })
