微信小程序wx:for和wx:for-item的正确用法
wx:for="{{list}}"用来循环数组,而list即为数组名wx:for-item="items" 即用来定义一个循环过程中每个元素的变量的
如果是一维数组,按照如下方式循环出来:
<view wx:for="{{list}}">
{{index}} {{item.name}}
</view>
以上代码中,item即为list的别名。
如果是二维甚至多维数组,按照如下方式循环:
<view wx:for="{{parentList}}">
{{item.id}}
<view wx:for="{{item.childList}}" wx:for-item="items">
{{items.name}}{{item.account}}
</view>
</view>
for (var i = 0 ; i < list.length; i++) {
var xxx = list[i];
}
等同于
<view wx:for="{{list}}" wx:for-item="xxx"></view>
谨记:wx:for是循环数组,wx:for-item即给列表赋别名
以下为几个错误使用,请大家谨慎使用:
1.直接用wx:for-item ,这样是循环不出来列表的
<view wx:for-item="{{list}}">
{{index}} {{item.name}}
</view>
2.子循环中慎用wx:for-item
<view wx:for="{{parentList}}">
{{item.id}}
<view wx:for-item="{{item.childList}}" wx:for-item="items">
{{items.name}}{{items.account}}
</view>
</view>
微信小程序wx:for和wx:for-item的正确用法的更多相关文章
- 微信小程序数据请求方法wx.request小测试
微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </vi ...
- 微信小程序wepy开发循环wx:for需要注意
微信小程序wepy开发循环wx:for需要注意 item index值必须在wx:for之后使用 <view wx:for="{{tablist}}" class=" ...
- 微信小程序-用户拒绝授权使用 wx.openSetting({}) 重新调起授权用户信息
场景模拟:用户进入微信小程序-程序调出授权 选择拒绝之后,需要用到用户授权才能正常使用的页面,就无法正常使用了. 解决方法:在用户选择拒绝之后,弹窗提示用户 拒绝授权之后无法使用,让用户重新授权(微信 ...
- 微信小程序如何在使用wx.request使用cookie
我主要是做asp.net mvc后端开发的,经常使用Jquery的ajax与后台的Web API进行数据交互. 最近公司要做一个小程序,要实现小程序与Web前端的通信,当然小程序是可以实现socket ...
- 微信小程序的坑之wx.miniProgram.postMessage
工作中有个需求是小程序的网页在关闭的时候,需要回传给小程序一个参数 查阅小程序官方文档,有这样一个接口 wx.miniProgram.postMessage ,可以用来从网页向小程序发送消息,然后通过 ...
- 微信小程序组件——详解wx:if elif else的用法
背景 在学习微信小程序开发wxml页面时,需要使用if,else来判断组件是否进行展示,代码如下 <view wx:if="{{is_login==1}}">成功登录& ...
- 微信小程序踩坑之一[wx.request]请求模式
最近在做小程序时,使用wx.request()方法请求时, 当使传输string类型时,一定要声明method请求模式为post,否则会一直报错,而不声明时默认为get, 已填坑 =,= wx.req ...
- 微信小程序节点查询方法:wx.createSelectorQuery()的使用场景与注意事项
小程序由于内置于微信,这使得它有了得天独厚的宣传和使用优势,本着学习的心态,我在官网上看了一遍开发文档,大致得出小程序框架的设计模式与使用注意事项(重点来了,其实开发文档某些方面叙述的并不仔细,甚至存 ...
- 微信小程序---人脸识别(wx.startFacialRecognitionVerify)
1.由于人脸核验功能涉及到用户的敏感.隐私信息,因此调用此接口的业务方,需要满足一定的条件,申请小程序的人脸识别api.开通小程序后台的接口权限入口后,开发者可以登录mp.weixin.qq.com小 ...
- 微信小程序(mpvue) wx.openSetting 无法调起设置页面
在开发过程有个需要保存图片/视频到设备相册的业务,so easy~ 巴啦啦撸下来了完整功能, wx.saveVideoToPhotosAlbum 会自动调起用户授权,美滋滋~~ btu.... ...
随机推荐
- Linux部署python django程序-apache
1.安装Apache 先卸载自带的httpd rpm -e httpd --nodeps 在网上下载四个文件 1.apr-1.4.6.tar.gz 2.apr-util-1.5.1.tar.gz 3. ...
- 【转载】MSXML应用总结 概念篇
原文:http://blog.sina.com.cn/s/blog_48f93b530100e9tr.html 微软提供了大量的XML开发工具和技术,而SMXML(Microsoft XML Core ...
- android 动态控制状态栏显示和隐藏
方法一:(经试验无效,但网上广为流传,也许是我使用方法不当,有待进一步验证……) android想要应用运行时全屏有一种方法是在activity的onCreat方法中加入如下代码: getWindow ...
- eclipse下载与安装并测试
下载地址:www.ecplise.org 下载完成后双击安装 安装完成之后,第一次运行eclipse会弹出Workspace Launcher对话框,要求设置工作空间存放项目文档. ...
- mongodb原生node驱动
写在前面 最近读<node.js学习指南>,对于mongodb没有介绍太多的工作原理,但是对于一个前端开发者,即使你还没有用过这种数据库也可以让你很好的理解和使用 一本非常好的 ...
- 使用efwplusScript开发Winform程序【像小程序那样开发PC软件】
一.前言 本人从事多年医疗管理软件的开发,在医院大多数的软件都还是CS程序,BS程序很少,对于使用者来说CS的操作体验确实比BS的要好. 1.CS的缺点就是升级麻烦,每次有新版本都需要所有客户端操作升 ...
- pygrib学习
pygrib-2.0.3/docs/index.html 导入pygrib模块 >>> import pygrib 打开grib文件,获取grib消息迭代器 >>> ...
- spring cloud 入门系列八:使用spring cloud sleuth整合zipkin进行服务链路追踪
好久没有写博客了,主要是最近有些忙,今天忙里偷闲来一篇. =======我是华丽的分割线========== 微服务架构是一种分布式架构,微服务系统按照业务划分服务单元,一个微服务往往会有很多个服务单 ...
- node.js主从分布式爬虫
前言 前文介绍过用Python写爬虫,但是当任务多的时候就比较慢, 这是由于Python自带的http库urllib2发起的http请求是阻塞式的,这意味着如果采用单线程模型,那么整个进程的大部分时间 ...
- python-gevent模块实现socket大并发
服务器端:gevent_server.py 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...