微信小程序 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 相关文章推荐
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
js实现幻灯片轮播图
Aug 14 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
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python中使用中文的方法
2011/02/19 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
python字符串与url编码的转换实例
2018/05/10 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
python框架flask表单实现详解
2019/11/04 Python
keras K.function获取某层的输出操作
2020/06/29 Python
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
迟到检讨书800字
2014/01/13 职场文书
阳光体育活动方案
2014/02/16 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
婚礼领导致辞大全
2015/07/28 职场文书