小程序for循环

在js文件中添加数据 msg_arr :

Page({
  data: {
    msg_arr : [{
      name:"张三",
      age : 25
    },
    {
      name:"小李",
      age:22
    }]
  }
});

在wxml中使用for循环:

<view class='container'>
  <view>测试</view>
  <view wx:for='{{msg_arr}}' wx:for-index='ind' wx:for-item='im'>
    下标是: {{ind}}, 当前项信息:{{im.name}}, {{im.age}}岁
  </view>
</view>

也可以使用默认的index和item

这样就不需要使用wx:for-index和wx:for-item给变量改名字

<view class='container'>
  <view>测试</view>
  <view wx:for='{{msg_arr}}'>
    下标是: {{index}}, 当前项信息:{{item.name}}, {{item.age}}岁
  </view>
</view>

for循环也是一样可以嵌套

如下可以输出9*9乘法表:

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

第二行使用text标签是由于不让其换行(view是换行的, 也可以加样式display:inline-block)

中间还使用了一个判断wx:if, 满足条件才输出

猜你喜欢

转载自blog.csdn.net/lljxk2008/article/details/81163204