07. 列表渲染

列表渲染就是使用for循环，遍历渲染。

例子 ：

Page({
  data: {
    users: [{
        name: '张三',
        age: 20
      },
      {
        name: '李四',
        age: 20
      },
      {
        name: '王五',
        age: 19
      },
      {
        name: '马六',
        age: 21
      },
    ]
  }
});

<view wx:for="{{users}}">
  {{index}} - {{item.name}} - {{item.age}}
</view>

这里的index和item是默认的，如果要改成别的名字，可以这样 :

<view wx:for="{{users}}" wx:for-item="d" wx:for-index="key">
  {{key}} - {{d.name}} - {{d.age}}
</view>

使用 wx:for-item 可以指定数组当前元素的变量名；

使用 wx:for-index 可以指定数组当前下标的变量名；

如果此时打开控制台，你会看到如下警告 :

大概意思就是让我们在for循环上设置一个wx:key的属性，它一般是用于比如 input 表单之类，给每一个列表中的表单设置一个唯一标识符，这样可以方便获取。（和vue的key效果一致）

<view wx:for="{{users}}" wx:for-item="d" wx:for-index="key" wx:key="key">
  {{key}} - {{d.name}} - {{d.age}}
</view>