Home Web Front-end JS Tutorial What is the difference between wx:for and wx:for-item in WeChat mini program?

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

Apr 08, 2018 pm 03:07 PM
the difference Applets

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>
Copy after login
Copy after login
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];
}
Copy after login
Copy after login
is equivalent to
<view wx:for="{{list}}" wx:for-item="xxx"></view>
Copy after login
Copy after login
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>
Copy after login
Copy after login
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>
Copy after login
Copy after login
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>
Copy after login
Copy after login
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];
}
Copy after login
Copy after login

is equivalent to

<view wx:for="{{list}}" wx:for-item="xxx"></view>
Copy after login
Copy after login
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>
Copy after login
Copy after login
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>
Copy after login
Copy after login

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!

Statement of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to set password protection for export PDF on PS How to set password protection for export PDF on PS Apr 06, 2025 pm 04:45 PM

Export password-protected PDF in Photoshop: Open the image file. Click "File"&gt; "Export"&gt; "Export as PDF". Set the "Security" option and enter the same password twice. Click "Export" to generate a PDF file.

The difference between H5 and mini-programs and APPs The difference between H5 and mini-programs and APPs Apr 06, 2025 am 10:42 AM

H5. The main difference between mini programs and APP is: technical architecture: H5 is based on web technology, and mini programs and APP are independent applications. Experience and functions: H5 is light and easy to use, with limited functions; mini programs are lightweight and have good interactiveness; APPs are powerful and have smooth experience. Compatibility: H5 is cross-platform compatible, applets and APPs are restricted by the platform. Development cost: H5 has low development cost, medium mini programs, and highest APP. Applicable scenarios: H5 is suitable for information display, applets are suitable for lightweight applications, and APPs are suitable for complex functions.

Why do you need to call Vue.use(VueRouter) in the index.js file under the router folder? Why do you need to call Vue.use(VueRouter) in the index.js file under the router folder? Apr 05, 2025 pm 01:03 PM

The necessity of registering VueRouter in the index.js file under the router folder When developing Vue applications, you often encounter problems with routing configuration. Special...

How to use XPath to search from a specified DOM node in JavaScript? How to use XPath to search from a specified DOM node in JavaScript? Apr 04, 2025 pm 11:15 PM

Detailed explanation of XPath search method under DOM nodes In JavaScript, we often need to find specific nodes from the DOM tree based on XPath expressions. If you need to...

Difference between centos and ubuntu Difference between centos and ubuntu Apr 14, 2025 pm 09:09 PM

The key differences between CentOS and Ubuntu are: origin (CentOS originates from Red Hat, for enterprises; Ubuntu originates from Debian, for individuals), package management (CentOS uses yum, focusing on stability; Ubuntu uses apt, for high update frequency), support cycle (CentOS provides 10 years of support, Ubuntu provides 5 years of LTS support), community support (CentOS focuses on stability, Ubuntu provides a wide range of tutorials and documents), uses (CentOS is biased towards servers, Ubuntu is suitable for servers and desktops), other differences include installation simplicity (CentOS is thin)

What are the different ways of promoting H5 and mini programs? What are the different ways of promoting H5 and mini programs? Apr 06, 2025 am 11:03 AM

There are differences in the promotion methods of H5 and mini programs: platform dependence: H5 depends on the browser, and mini programs rely on specific platforms (such as WeChat). User experience: The H5 experience is poor, and the mini program provides a smooth experience similar to native applications. Communication method: H5 is spread through links, and mini programs are shared or searched through the platform. H5 promotion methods: social sharing, email marketing, QR code, SEO, paid advertising. Mini program promotion methods: platform promotion, social sharing, offline promotion, ASO, cooperation with other platforms.

The difference in output results of console.log: Why do the same variables have different printing methods but different results? The difference in output results of console.log: Why do the same variables have different printing methods but different results? Apr 04, 2025 am 11:48 AM

In-depth discussion of the differences in console.log output in this article will analyze the reasons why the output results of console.log function in a piece of code are different. Code snippets involve URL parameter resolution...

Where is the C language function library? How to add the C language function library? Where is the C language function library? How to add the C language function library? Apr 03, 2025 pm 11:39 PM

The C language function library is a toolbox containing various functions, which are organized in different library files. Adding a library requires specifying it through the compiler's command line options, for example, the GCC compiler uses the -l option followed by the abbreviation of the library name. If the library file is not under the default search path, you need to use the -L option to specify the library file path. Library can be divided into static libraries and dynamic libraries. Static libraries are directly linked to the program at compile time, while dynamic libraries are loaded at runtime.

See all articles