这篇文章主要介绍了微信小程序for循环详解的相关资料,需要的朋友可以参考下
微信小程序for循环详解
1,wx:for在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下:
wxml文件:
1 <view wx:for=\"{{items}}\">
2 {{index}}: {{item:one}}
3 </view>
4 js文件:
5 Page({
6 items:[{
7 one: \"test1\",
8 },{
9 one: \"test2\"
10 }]
11 })
可以使用wx:for-item指定数组当前元素的变量名
可以使用wx:for-index指定数组当前下标的变量名,事例如下:
wxml文件:
1 <view wx:for=\"{{items}}\" wx:for-item=\"name\" wx:for-index=\"id\">
2 {{id}}: {{name.one}}
3 </view>
4
5 下面是一个九九乘法表事例:
6 <view wx:for=\"{{[1,2,3,4,5,6,7,8,9]}}\" wx:for-item=\"i\">
7 <view wx:for=\"{{[1,2,3,4,5,6,7,8,9]}}\" wx:for-item=\"j\">
8 <view wx:if=\"{{i <= j}}\">
9 {{i}}*{{j}} = {{i * j}}
10 </view>
11 </view>
12 </view>
wx:for用在标签上,以渲染一个包含多节点的结构块。例如:
1 <block wx:for=\"{{[1,2,3]}}\">
2 <view> {{index}}: </view>
3 <view> {{item}} </view>
4 </block>
感谢阅读,希望能帮助到大家,谢谢大家的支持!