微信小程序开发——数据绑定for循环

WeChat小程序交流（QQ群：769977169）

效果图

代码示例

1、xxx.wxml

<!-- 
wx:for 控制属性绑定一个数组
1 默认数组的当前项的下标变量名默认为 index
2 数组当前项的变量名默认为 item 
-->
<text class='textStyle'>wx:for 控制属性绑定一个数组</text>
<view wx:for="{{array}}">
  {{index}}:{{item.message}}
</view>

<!-- 
1 wx:for-item 可以指定数组当前元素的变量名
2 wx:for-index 可以指定数组当前下标的变量名 
-->
<text class='textStyle'>wx:for-item、wx:for-index</text>
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

<!-- block wx:for -->
<text class='textStyle'>block wx:for</text>
<block wx:for="{{arrayNames}}">
  <view>{{item}}</view>
</block>

<!-- 99乘法表 -->
<text class='textStyle'>99乘法表</text>
<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}}">
      <view>{{i}} * {{j}} = {{i * j}}</view>
    </view>
  </view>
</view>

2、xxx.wxjs

Page({

  /**
   * 页面的初始数据
   */
  data: {
    array: [{message:"hello"}, {message:"herman"}, {message:"VST ECS"}],
    arrayNames: ["iOSZhang", "devZhang"],
  }
}

使用注意：

1、在page的data里定义的变量，如name，在使用时，如果是在wxml文件里给组件赋值，则为{{name}}形式；如果是在wxjs文件里的this.setData方法里进行赋值，则为name: xxx；如果是在wxjs文件里的其他地方使用，则为this.data.name，否则会报错，并提示形如"ReferenceError: name is not defined"。