微信小程序中最重要的内容——列表渲染

列表渲染

1、wx:for 列表渲染单个组件

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。数组当前项的下标变量名默认为index；数组当前项的变量名默认为item。

示例代码：

<view wx:for=“{
  { array }}”>
 {
  { index }} : {
  { item.message }}
 </view>

Page({
      data: {
			array: [{
					message: ‘第0个元素’,
			}, {
					message: ‘第1个元素’
			}]
	}
})

使用wx:for-item可以指定数组当前元素的变量名；使用wx:for-index可以指定数组当前下标的变量名
示例代码：

<view wx:for=“{
  { array }}” wx:for-index=“idx” wx:for-item=“itemName”>
{
  { idx }}: {
  { itemName.message }}
</view>

2、block wx:for列表渲染多个组件

wx:for应用在某一个组件上，如果想渲染一个包含多节点的结构块，这时wx:for需要应用在标签上。

示例代码：

<block wx:for=“{
  { [1,2,3]}}”> 
<view> {
  { index }} : </view>
<view> {