微信小程序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 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
Ext grid 添加右击菜单
Nov 26 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 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面试题集锦
2012/03/08 PHP
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
jquery实现动态画圆
2014/12/04 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python实现包含min函数的栈
2016/04/29 Python
Python自动生产表情包
2017/03/17 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
python的concat等多种用法详解
2018/11/28 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
家长学校实施方案
2014/03/15 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
煤矿安全保证书
2015/02/27 职场文书
筑梦中国心得体会
2016/01/18 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
golang日志包logger的用法详解
2021/05/05 Golang
Mysql 如何查询时间段交集
2021/06/08 MySQL
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android