What is the difference between wx:for and wx:for-item in WeChat mini program?

This time I will bring you the difference between wx:for and wx:for-item in the WeChat mini program. What are the things to note when using wx:for and wx:for-item in the WeChat mini program? There are Which ones, the following are practical cases, let’s take a look.

wx:for="{{list}}" is used to loop the array, and list is the array namewx:for-item=" items" is used to define the variable of each element during a loop. If it is a one-dimensional array

, loop it out as follows:

<view wx:for="{{list}}">
{{index}} {{item.name}}
</view>

In the above code, item is the alias of list. If it is a two-dimensional or even

multi-dimensional array

, loop as follows:

<view wx:for="{{parentList}}">
{{item.id}}
<view wx:for="{{item.childList}}" wx:for-item="items">
{{items.name}}{{item.account}}
</view>
</view>
for (var i = 0 ; i < list.length; i++) {
var xxx = list[i];
}

is equivalent to

<view wx:for="{{list}}" wx:for-item="xxx"></view>

Remember: wx:for is a loop array , wx:for-item is to assign an alias to the list

The following are several incorrect uses, please use them with caution:

1. Use wx:for-item directly, so the loop will not come out List

<view wx:for-item="{{list}}">
{{index}} {{item.name}}
</view>

2. Use wx:for-item with caution in sub-loops

<view wx:for="{{parentList}}">
 {{item.id}}
 <view wx:for-item="{{item.childList}}" wx:for-item="items">
 {{items.name}}{{items.account}}
 </view>

Correct usage of wx:for and wx:for-item in WeChat applet

wx :for="{{list}}" is used to loop the array, and list is the array name wx:for-item="items" is used to define the variables of each element during the loop

If it is a one-dimensional array, loop it out as follows:

<view wx:for="{{list}}">
{{index}} {{item.name}}
</view>

In the above code, item is the alias of list.

If it is a two-dimensional or even multi-dimensional array, loop as follows:

<view wx:for="{{parentList}}">
{{item.id}}
<view wx:for="{{item.childList}}" wx:for-item="items">
{{items.name}}{{item.account}}
</view>
</view>
for (var i = 0 ; i < list.length; i++) {
var xxx = list[i];
}

is equivalent to

<view wx:for="{{list}}" wx:for-item="xxx"></view>

Remember: wx:for is a loop array, wx:for-item That is to assign an alias to the list

The following are several incorrect uses, please use them with caution:

1. Use wx:for-item directly, so that the list cannot be looped

<view wx:for-item="{{list}}">
{{index}} {{item.name}}
</view>

2. Use wx:for-item with caution in sub-loops

<view wx:for="{{parentList}}">
 {{item.id}}
 <view wx:for-item="{{item.childList}}" wx:for-item="items">
 {{items.name}}{{items.account}}
 </view>

I believe you have mastered the method after reading the case in this article. Please pay attention for more exciting things. Other related articles on php Chinese website!

Recommended reading:

How to deal with vue axios request timeout

axios login request interceptor

The above is the detailed content of What is the difference between wx:for and wx:for-item in WeChat mini program?. For more information, please follow other related articles on the PHP Chinese website!