这里有新鲜出炉的微信小程序入门,程序狗速度看过来!
微信小程序(weixinxiaochengxu),简称小程序,缩写 XCX,英文名 mini program,是一种不需要下载安装即可使用的应用,它实现了应用 "触手可及" 的梦想,用户扫一扫或搜一下即可打开应用。
这篇文章主要介绍了微信小程序 for 循环详解的相关资料, 需要的朋友可以参考下
1,wx:for
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item 事例如下:
wxml 文件:
- <view wx:for="{{items}}">
- {{index}}: {{item:one}}
- </view>
- js文件:
- Page({
- items:[{
- one: "test1",
- },{
- one: "test2"
- }]
- })
可以使用 wx:for-item 指定数组当前元素的变量名
可以使用 wx:for-index 指定数组当前下标的变量名,事例如下:
wxml 文件:
- <view wx:for="{{items}}" wx:for-item="name" wx:for-index="id">
- {{id}}: {{name.one}}
- </view>
- 下面是一个九九乘法表事例:
- <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>
2,block wx:for
wx:for 用在
- <block wx:for="{{[1,2,3]}}">
- <view> {{index}}: </view>
- <view> {{item}} </view>
- </block>
效果图如下:
来源: http://www.phperz.com/article/17/0717/331362.html