微信小程序 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 相关文章推荐
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
javascript实现多边形碰撞检测
Oct 24 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
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
解析argc argv在php中的应用
2013/06/24 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
用客户端js实现带省略号的分页
2013/04/27 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
详解python的webrtc库实现语音端点检测
2017/05/31 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
python散点图实例之随机漫步
2018/08/27 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
幼儿园万圣节活动总结
2015/05/05 职场文书
新手入门Mysql--概念
2021/06/18 MySQL
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python
分享python函数常见关键字
2022/04/26 Python