微信小程序 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 相关文章推荐
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
详解JavaScript的变量
Apr 04 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
微信小程序 条件渲染详解
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
第六节 访问属性和方法 [6]
2006/10/09 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
python操作yaml说明
2020/04/08 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
外企C语言笔试题
2013/11/10 面试题
教师个人自我鉴定
2014/02/08 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
企业法人授权委托书
2014/09/25 职场文书
2019年教师入党申请书
2019/06/27 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python
node快速搭建后台的实现步骤
2022/02/18 NodeJs