小程序编程第24课

教程

各位战友，早上好。这节课我们的目标是把上节课计算出来的数据展示到页面上。

怎么把数组里面的数据展示到页面上呢？

我们首先要把它保存到data里面

也就是说，我们需要在data中增加一个属性,名字叫items，初始化为空数组

data: {
    p: '',
    i: '',
    n: '',
    result: '',
    items: []
  },

然后我们把计算好的数据存进去

this.setData({
  items: arr
})

但是怎么展示到页面上呢？

这可是数组啊

我们是通过循环把每一行的数据放到数组中的，反过来，我们可以通过循环把每一行的数据从数组中取出来然后放到页面上。

也就是说，页面上的东西也是可以循环的。

我们可以这样

<view wx:for="{{items}}" class="td">
	<text>{{item.index}}</text>
	<text>{{item.perInterest}}</text>
	<text>{{item.totalInterest}}</text>
	<text>{{item.total}}</text>
</view>

这几行代码是什么意思？

wx:for的意思是，循环渲染当前节点。也就是循环这几行代码。

items就是我们存储的表格数据，item就是每一行的数据

循环默认是从数组第0个元素开始到最后一个结束

item.index，我猜那你应该知道是啥意思了，就是访问当前元素的Index属性。

当前元素就是每行的对象，每行的对象都包含Index这个属性，所以可以访问

于是我们就渲染出了列表数据。

保存一下，试试。然后成功了。

记得提交代码

作业

跟着教程写出代码渲染出列表即可