控制属性：列表渲染

即，数组类型的数据，去循环渲染。

那先来看看怎么去遍历渲染一个数据中的数组=》

逻辑层：

界面层：

1.循环遍历 wx:for="{{ }}" 循环数组

2.循环变量 item.

ps: 循环变量 item 如果和数据名称冲突，可以将循环变量改变。

那么如何改变？？？

3.wx:for-item="abc" (名称随意)

如图=》

4.从上图看到，控制台有警告，一定不能小看它。

now you can provide attr 'wx:key' for a 'wx:for' to improve performance.你可以用 'wx:key' 来为 'wx:for' 提高性能。

那么，随便添加 wx:key=“aaa” 之后，警告消失了。为什么呢？？？

我们都知道，key一般在做列表渲染时遇到的一个问题：

4.1 通常，一条数据对应页面一条列表，但当数据更改后，数据和页面列表还会一一对应吗？

从下面图中看出，未添加和正常在后面添加数据，页面是一一对应的；但插队添加时，页面出现混乱。

4.2 button事件交互绑定 bindtap

给按钮添加一个标识函数，该标识一般以Handle结尾，该函数一般是定义在逻辑层中。

页面对象除了，生命周期的钩子函数之外，可以定义任何其他的函数，这些函数可以作为视图层（界面）元素的事件处理函数。

逻辑层：

界面：勾选checkbox之后，再点击添加，页面没有出现混乱，切新增条目和页面一一对应。

4.3 页面混乱

处理函数，在前面新增条目：

  // 此处目的：给button添加点击事件，给students界面添加数据
  addItemHandle(){

    // 先找到students
    // const students = this.data.students
    // push新条目，即新增 后新增
    // students.push({ id: Math.random(), name: '赵谦' + Math.random(), age: 18 })

    // 数据前面新增
    // concat 数组连接
    const students = [{ id: Math.random(), name: '赵谦' + Math.random(), age: 18 }].concat(this.data.students)

    // 改变页面的属性值
    this.setData({students})
  }

界面：

ps1: 未点击add = 页面正常