search
HomeWeb Front-endJS TutorialPractical examples of using wx:for and wx:for-item

<span style="font-family:Microsoft Yahei, Hiragino Sans GB, Helvetica, Helvetica Neue, 微软雅黑, Tahoma, Arial, sans-serif">This time I will bring you a practical case of using wx:for and wx:for-item. What are the <a href="http://www.php.cn/code/10182.html" target="_blank"> precautions</a> for using wx:for and wx:for-item? The following is a practical case, let’s take a look. </span>

<span style="font-family:Microsoft Yahei, Hiragino Sans GB, Helvetica, Helvetica Neue, 微软雅黑, Tahoma, Arial, sans-serif">z</span>wx:for="{{list}}" is used to loop the array, and list is For the array name wx:for-item="items" is used to define the variable of each element during a loop. If it is

one The dimensional array

is looped out as follows:

<view>
{{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>
{{item.id}}
<view>
{{items.name}}{{item.account}}
</view>
</view>
for (var i = 0 ; i 
is equivalent to

<view></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>
{{index}} {{item.name}}
</view>

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

<view>
 {{item.id}}
 <view>
 {{items.name}}{{items.account}}
 </view></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, it is looped out as follows:

<view>
{{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>
{{item.id}}
<view>
{{items.name}}{{item.account}}
</view>
</view>
for (var i = 0 ; i 

is equivalent to

<view></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>
{{index}} {{item.name}}
</view>

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

<view>
 {{item.id}}
 <view>
 {{items.name}}{{items.account}}
 </view></view>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How FileReader implements a file reader


Detailed explanation of the use of slot sockets in vue components

The above is the detailed content of Practical examples of using wx:for and wx:for-item. For more information, please follow other related articles on 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
手把手教你uniapp和小程序分包(图文)手把手教你uniapp和小程序分包(图文)Jul 22, 2022 pm 04:55 PM

本篇文章给大家带来了关于uniapp跨域的相关知识,其中介绍了uniapp和小程序分包的相关问题,每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分,希望对大家有帮助。

MySQL表设计实战:创建一个电商订单表和商品评论表MySQL表设计实战:创建一个电商订单表和商品评论表Jul 03, 2023 am 08:07 AM

MySQL表设计实战:创建一个电商订单表和商品评论表在电商平台的数据库中,订单表和商品评论表是两个非常重要的表格。本文将介绍如何使用MySQL来设计和创建这两个表格,并给出代码示例。一、订单表的设计与创建订单表用于存储用户的购买信息,包括订单号、用户ID、商品ID、购买数量、订单状态等字段。首先,我们需要创建一个名为"order"的表格,使用CREATET

Java开发实战:集成七牛云云存储服务实现文件上传Java开发实战:集成七牛云云存储服务实现文件上传Jul 06, 2023 pm 06:22 PM

Java开发实战:集成七牛云云存储服务实现文件上传引言随着云计算和云存储的发展,越来越多的应用程序需要将文件上传至云端进行存储和管理。云存储服务的优势在于高可靠性、可扩展性和灵活性。本文将介绍如何使用Java语言开发,集成七牛云云存储服务,实现文件上传功能。七牛云简介七牛云是国内领先的云存储服务提供商,其提供了全面的云存储和内容分发服务。用户可以通过七牛云提

深入学习 Elasticsearch 查询语法与实战深入学习 Elasticsearch 查询语法与实战Oct 03, 2023 am 08:42 AM

深入学习Elasticsearch查询语法与实战引言:Elasticsearch是一款基于Lucene的开源搜索引擎,主要用于分布式搜索与分析,广泛应用于大规模数据的全文搜索、日志分析、推荐系统等场景。在使用Elasticsearch进行数据查询时,灵活运用查询语法是提高查询效率的关键。本文将深入探讨Elasticsearch查询语法,并结合实际案例给出

Vue实战:日期选择器组件开发Vue实战:日期选择器组件开发Nov 24, 2023 am 09:03 AM

Vue实战:日期选择器组件开发引言:日期选择器是在日常开发中经常用到的一个组件,它可以方便地选择日期,并提供各种配置选项。本文将介绍如何使用Vue框架来开发一个简单的日期选择器组件,并提供具体的代码示例。一、需求分析在开始开发之前,我们需要进行需求分析,明确组件的功能和特性。根据常见的日期选择器组件功能,我们需要实现以下几个功能点:基础功能:能够选择日期,并

MySQL表设计实战:创建一个电影信息表和演员表MySQL表设计实战:创建一个电影信息表和演员表Jul 01, 2023 pm 08:16 PM

MySQL表设计实战:创建一个电影信息表和演员表导语:在数据库设计中,表的创建是一个非常关键的环节。本文将以电影信息表和演员表为例,详细介绍如何进行MySQL表的设计和创建,并附上相应的代码示例。一、电影信息表设计和创建电影信息表是用来存储电影的相关信息,包括电影名称、导演、上映时间、电影类型等字段。下面是电影信息表的设计和创建过程,首先我们需要选择合适的字

Git开发实战:项目经验分享与总结Git开发实战:项目经验分享与总结Nov 04, 2023 pm 12:32 PM

Git是一款分布式版本控制系统,广泛应用于软件开发领域。在实际的项目开发中,合理利用Git进行团队协作和版本管理,能够极大地提高开发效率和项目质量。本文将分享我在Git开发中的实战经验,并总结一些注意事项和技巧,希望对读者有所启发和帮助。一、团队协作之分支管理在多人协作的项目中,充分利用Git的分支管理功能,能够更好地进行团队协作和版本控制。通常情况下,主干

掌握实战:PHP 异步 HTTP 下载多个文件的开发实例及解决方案掌握实战:PHP 异步 HTTP 下载多个文件的开发实例及解决方案Sep 12, 2023 am 11:39 AM

掌握实战:PHP异步HTTP下载多个文件的开发实例及解决方案引言:在开发过程中,我们常常需要从网络上下载大量的文件,例如图片、文档等。传统的下载方式是使用同步的方式进行下载,这意味着当一个文件下载完成之后才能开始下载下一个文件,这样会导致下载速度变慢,用户体验也不好。而异步下载则可以实现多个文件同时下载,提高下载速度,提高用户体验。本文将介绍如何使用

See all articles

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

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Tools

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment