微信小程序wx:for和wx:for-item的用法详解
更新时间：2018年04月01日 17:52:23 投稿：mrr
这篇文章主要介绍了微信小程序wx:for和wx:for-item的正确用法,wx:for是循环数组，wx:for-item即给列表赋别名,文中给大家列出来几个错误用法，大家一起学习下
wx:for="{{list}}"用来循环数组，而list即为数组名wx:for-item="items" 即用来定义一个循环过程中每个元素的变量的
如果是一维数组,按照如下方式循环出来：
<view wx:for="{{list}}">
{{index}} {{item.name}}
</view>
以上代码中，item即为list的别名。
如果是二维甚至多维数组，按照如下方式循环：
<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];
}
等同于
<view wx:for="{{list}}" wx:for-item="xxx"></view>
谨记：wx:for是循环数组，wx:for-item即给列表赋别名
以下为几个错误使用，请大家谨慎使用：
1.直接用wx:for-item ，这样是循环不出来列表的
<view wx:for-item="{{list}}">
{{index}} {{item.name}}
</view>
2.子循环中慎用wx:for-item
<view wx:for="{{parentList}}">
{{item.id}}
<view wx:for-item="{{item.childList}}" wx:for-item="items">
{{items.name}}{{items.account}}
</view>
微信小程序wx:for和wx:for-item的正确用法
wx:for="{{list}}"用来循环数组，而list即为数组名wx:for-item="items" 即用来定义一个循环过程中每个元素的变量的
如果是一维数组,按照如下方式循环出来：
<view wx:for="{{list}}">
{{index}} {{item.name}}
</view>
以上代码中，item即为list的别名。
如果是二维甚至多维数组，按照如下方式循环：
<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];
}
等同于
<view wx:for="{{list}}" wx:for-item="xxx"></view>
谨记：wx:for是循环数组，wx:for-item即给列表赋别名
以下为几个错误使用，请大家谨慎使用：
1.直接用wx:for-item ，这样是循环不出来列表的
<view wx:for-item="{{list}}">
{{index}} {{item.name}}
</view>
2.子循环中慎用wx:for-item
<view wx:for="{{parentList}}">
{{item.id}}
<view wx:for-item="{{item.childList}}" wx:for-item="items">
{{items.name}}{{items.account}}
</view>
总结
以上所述是小编给大家介绍的微信小程序wx:for和wx:for-item的用法详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
Javascript:为input设置readOnly属性(示例讲解)
本篇文章主要是对Javascript中为input设置readOnly属性的示例代码进行了介绍。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
理解Javascript_02_理解undefined和null
其实在 ECMAScript 的原始类型中，是有Undefined 和 Null 类型的。 这两种类型都分别对应了属于自己的唯一专用值，即undefined 和 null。2010-10-10
在ECAMScript3给Function的原型定义了两个方法，它们是Function.prototype.call和Function.prototype.apply。本文详细介绍了apply与call的用法，有需要的可以参考下。2016-07-07
拖动列宽的表格table标题同时改变td的大小，本文将以实例演示为大家呈现，感兴趣的朋友可以参考下哈，希望对你学习js或者css有所帮助2013-04-04
详解基于Vue cli生成的Vue项目的webpack4升级
这篇文章主要介绍了详解基于Vue cli生成的Vue项目的webpack4升级，本文将详细介绍从webpack3到webpack4的升级过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了js blob类型url的视频下载问题的解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
跟我学习javascript的Date对象，文章主要介绍了Date 日期和时间对象的操作，文章末尾为大家附加了两个案例，帮助大家更好的学习javascript的Date对象，对这方面感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章给大家主要介绍了通过网页查看JS源码的时候，发现汉字显示是乱码的解决方法，文中通过图文详解的介绍了解决的步骤，详细会对大家很有帮助，有需要的朋友们下面来一起看看吧。2016-10-10
JS循环语句也叫迭代语句,是一种特殊的语句,主要用于需要多次执行的代码块,下面这篇文章主要给大家介绍了关于JavaScript中循环之间的差异的相关资料,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了创建与框架无关的JavaScript插件，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-12-12
最新评论