Detailed explanation of WeChat applet for loop

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. The example is 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 subscript of the array. The example is as follows:

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 tag to render a block containing Multi-node structural blocks. For example:

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

The rendering is as follows:

Thank you for reading, I hope it can help everyone, thank you for your support of this site !

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