微信小程序wx:for和wx:for-item的用法详解


Posted in Javascript onApril 01, 2018

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 相关文章推荐
高亮显示web页表格行的javascript代码
Nov 19 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
javascript工具库代码
Mar 29 Javascript
js数组操作学习总结
Nov 04 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
微信小程序block的使用教程
Apr 01 #Javascript
JavaScript动态加载重复绑定问题
Apr 01 #Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 #Javascript
Vue.js进阶知识点总结
Apr 01 #Javascript
vue 指定组件缓存实例详解
Apr 01 #Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 #Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 #Javascript
You might like
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
js 学习笔记(三)
2009/12/29 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
python线程、进程和协程详解
2016/07/19 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
中英双版中文教师求职信
2013/10/27 职场文书
垃圾桶标语
2014/06/24 职场文书
银行实习推荐信
2015/03/27 职场文书
2015年维修工作总结
2015/04/25 职场文书
小学美术教学反思
2016/02/17 职场文书