微信小程序 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 限制输入脚本大全
Nov 03 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
layui table 参数设置方法
Aug 14 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 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
PHP.MVC的模板标签系统(五)
2006/09/05 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
Python合并字符串的3种方法
2015/05/21 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
python中使用while循环的实例
2019/08/05 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
娱乐节目策划方案
2014/06/10 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
法院个人总结
2015/03/03 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS