4.9　列表渲染wx:for

到目前为止，我们只将第一篇《小时候的冰棍儿与雪糕》改为了数据绑定的形式，现在来尝试把所有的文章都改为数据绑定的形式。

首先将其他两篇文章的数据提取到post.js文件中，同第一篇文章的数据组成一个数组。

注意，代码中this.setData的key更改为了postList，value被更换成了一个包含3个元素的数组，每个元素代表一篇文章的数据。

现在，我们已经有3篇文章的数据了。我们当然可以像改写第一篇文章一样，依次改写其他两篇文章的{{}}绑定。但这样好吗？

这里来考虑一个问题，如果我有100篇文章，怎么办？难道也像这样手动地去填写100篇文章的{{}}吗？

如果可以在wxml里做for循环该有多好？

小程序确实提供了一个wxml组件的for循环，称为列表渲染。我们一起来看看，如何使

用列表渲染来改写文章列表，先给出改写后的代码。

重点关注<block></block>这对括号内的代码。<block>标签没有实质意义，它并不是组件，所以我们称作“标签”，它仅仅是一个包装，不会在页面内被渲染，可以理解为常见编程语言里的括号，在block标签中被包裹的元素将被重复渲染。

在block标签上，放置了一个wx:for的特殊属性，它的值为{{postList}}。wx:for将绑定一个数组，在本示例中，这个数组就是postList，它对应post.js文件中setData的数组数据。

wx:for-item指定数组当前元素的变量名，我们将当前元素的变量名指定为item。

wx:for-index指定当前元素在数组中序号的变量名，我们命名为idx。当然，在本示例中，只是定义了这个wx:for-index，并没有真正地使用它。

有了item这个数组子元素后，就可以按照上一小节中改写第一篇文章时所使用的{{}}语法来填写数据绑定了。在所有的{{}}填写数据绑定变量。保存运行后，发现三篇文章都可以正常显示，但代码的总量却大大减少了。

wx:for并不是一定要作用在block标签上，如果把代码清单4-24中的block标签换成view，一样可以正常运行。但并不推荐使用view等组件来做列表渲染。因为同HTML一样，我们希望标签或者组件元素是语义明确的。view组件通常被用来当作容器或者是区域分隔，它有它的使命，不应该被滥用。

开发者可以尝试将wx:for-item="item"属性给去掉，文章列表依然可以正常显示。不定义item，那么{{}}内的item是哪里来的？事实上，不定义数组子元素的变量名，小程序默认子元素的变量名就是item。如果你不喜欢item这个变量名，可以将它替换为其他你喜欢的变量名，比如wx:for-item="element"。如果更改了子元素的变量名，记得将{{}}中对应的item都更换为被指定的变量名，比如element。