微信小程序 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字符串拼接的效率问题
Dec 25 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
javascript变量声明实例分析
Apr 25 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
Element Dialog对话框的使用示例
Jul 26 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中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
Js apply方法详解
2017/02/16 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中正则表达式详解
2017/05/17 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
Python matplotlib实时画图案例
2020/04/23 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
竞争上岗实施方案
2014/03/21 职场文书
离婚民事起诉状
2015/08/03 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python