微信小程序 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 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 Javascript
vue的$http的get请求要加上params操作
Nov 12 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 Undefined index的问题
2009/06/01 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
php下Memcached入门实例解析
2015/01/05 PHP
基于jquery的多功能软键盘插件
2012/07/25 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
用python代码做configure文件
2014/07/20 Python
详细解析Python当中的数据类型和变量
2015/04/25 Python
Python编写Windows Service服务程序
2018/01/04 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
django迁移文件migrations的实现
2020/03/31 Python
python如何建立全零数组
2020/07/19 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
2019年教师入党申请书
2019/06/27 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
Python+Tkinter打造签名设计工具
2022/04/01 Python
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA