下面我们.js文件的for语句使用传统的JavaScript语法，有别于微信小程序wxml页面中使用的for语句（见后）。

.js脚本中for语句的使用示例

小白教程网www.2d5.net

  onLoad: function (options) {
    for (var i = 0; i < 3; ++i) {
      console.log(i);
    }
  },

效果如图9-9所示。

1.WXML页面中for语句的使用

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组当前项的下标变量名为 index，数组当前项的变量名为 item。

WXML页面中可以通过for循环显示.js脚本中定义或者获取的数组数据，WXML中for语句的使用示例

小白教程网www.2d5.net

<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}"> <!—{{}}中定义了一个数组，使用for循环来显示-->
  <view>序号：{{index}} | 内容：{{item}}</view>
</view>

效果如图9-10所示。

2.WXML中for语句嵌套的使用

提示：使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名。

九九乘法表，.wxml文件代码示例

小白教程网www.2d5.net

<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
  <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
      <view wx:if="{{i <= j}}">
        {{i}}*{{j}} = {{i * j}}
      </view>
  </view>
</view>

效果如图9-11所示。

3.for循环在WXML中的使用

在小程序中对应的.js文件里面的data区块定义数组（people），然后在对应的.wxml页面使用for循环来显示。

.js脚本中数组的定义示例

小白教程网www.2d5.net

  data: {
    people: ["张三", "李四", "王五"]
  },

WXML中for语句显示数据示例

小白教程网www.2d5.net

<view wx:for="{{people}}">
  <view>序号：{{index}} | 内容：{{item}}</view>
</view>

效果如图9-12。

我们使用wx:for-item和wx:for-index修改关键字后，WXML代码示例

小白教程网www.2d5.net

<view wx:for="{{people}}" wx:for-index="id"  wx:for-item="xingming" >
  <view>序号：{{id}} | 内容：{{xingming}}</view>
</view>

       效果如图9-12所示。