微信小程序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 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
JSON获取属性值方法代码实例
Jun 30 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彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
ExtJS 入门
2010/10/29 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
彻底理解js面向对象之继承
2018/02/04 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
Python选课系统开发程序
2016/09/02 Python
Python中单例模式总结
2018/02/20 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
python 实现倒排索引的方法
2018/12/25 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
Python 创建TCP服务器的方法
2020/07/28 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
美发店5.1活动方案
2014/01/24 职场文书
委托书的格式
2014/08/01 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
导游词之张家口
2019/12/13 职场文书
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python