Home >WeChat Applet >Mini Program Development >Detailed explanation of WeChat applet for loop

Detailed explanation of WeChat applet for loop

高洛峰
高洛峰Original
2017-01-09 10:56:574870browse

1.wx:for

Use the wx:for control attribute on the component to bind an array, and the component can be repeatedly rendered using the data of each item in the array. By default, the subscript variable name of the current item in the array defaults to index, and the variable name of the current item in the array defaults to item. Examples are as follows:

wxml file:

<view wx:for="{{items}}">
{{index}}: {{item:one}}
</view>
js文件:
Page({
items:[{
one: "test1",
},{
one: "test2"
}]
})

You can use wx:for-item to specify the variable name of the current element of the array

You can use wx:for-index to specify the variable name of the current index of the array, for example:

wxml file:

<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 is used on the 935bb15358aeeb18747ba360a3e4ab1a tag to render a structure block containing multiple nodes. For example:

<block wx:for="{{[1,2,3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>

The renderings are as follows:

微信小程序 for 循环详解

Thanks for reading, I hope this helps everyone, and thank you for your support of this site!

For more articles related to the detailed explanation of the WeChat applet for loop, please pay attention to the PHP Chinese website!


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn