微信小程序 for 循环详解


Posted in Javascript onOctober 09, 2016

1,wx:for

在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下:

wxml文件:

<view wx:for="{{items}}">
{{index}}: {{item:one}}
</view>
js文件:
Page({
items:[{
one: "test1",
},{
one: "test2"
}]
})

可以使用wx:for-item指定数组当前元素的变量名

可以使用wx:for-index指定数组当前下标的变量名,事例如下:

wxml文件:

<view wx:for="{{items}}" wx:for-item="name" wx:for-index="id">
{{id}}: {{name.one}}
</view>

下面是一个九九乘法表事例:
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
<view
 wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
<view
 wx:if="{{i <= j}}">
{{i}}*{{j}} = {{i * j}}
</view>
</view>
</view>

2,block  wx:for

wx:for用在<blcok/>标签上,以渲染一个包含多节点的结构块。例如:

<block wx:for="{{[1,2,3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>

效果图如下:

微信小程序 for 循环详解

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
理解javascript异步编程
Jan 27 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
vue-router源码之history类的浅析
May 21 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
微信小程序 条件渲染详解
Oct 09 #Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 #Javascript
最实用的jQuery分页插件
Oct 09 #Javascript
js本地图片预览实现代码
Oct 09 #Javascript
js html css实现复选框全选与反选
Oct 09 #Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 #Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 #Javascript
You might like
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
Python的高级Git库 Gittle
2014/09/22 Python
跟老齐学Python之正规地说一句话
2014/09/28 Python
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
python从入门到精通(DAY 1)
2015/12/20 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
python实现堆排序的实例讲解
2020/02/21 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
苹果音乐订阅:Apple Music
2018/08/02 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
心得体会开头
2014/01/01 职场文书
幼儿园保教管理制度
2014/02/03 职场文书
采购部长岗位职责
2014/06/13 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
海洋科学专业求职信
2014/08/10 职场文书
法定授权委托证明书
2014/09/27 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
Nginx配置https的实现
2021/11/27 Servers