微信小程序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 相关文章推荐
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
VueJS 取得 URL 参数值的方法
Jul 19 Javascript
详细分析vue表单数据的绑定
Jul 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自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
React Router基础使用
2017/01/17 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
省三好学生申请材料
2014/01/22 职场文书
爱心倡议书范文
2014/05/12 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
2015年实习单位评语
2015/03/25 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
详解vue中v-for的key唯一性
2021/05/15 Vue.js
总结Python连接CS2000的详细步骤
2021/06/23 Python
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android