微信小程序 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 时间比较实现代码
Oct 28 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
JS+css3实现幻灯片轮播图
Aug 14 Javascript
JavaScript 数组去重详解
Sep 15 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
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
python爬虫爬取微博评论案例详解
2019/03/27 Python
在python3中实现更新界面
2020/02/21 Python
Python更换pip源方法过程解析
2020/05/19 Python
python的数学算法函数及公式用法
2020/11/18 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
销售行政专员职责
2014/01/03 职场文书
医生进修自我鉴定
2014/01/19 职场文书
董事长秘书职责
2014/01/31 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
志愿服务心得体会
2016/01/15 职场文书