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的正确用法的更多相关文章

  1. 微信小程序数据请求方法wx.request小测试

    微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </vi ...

  2. 微信小程序wepy开发循环wx:for需要注意

    微信小程序wepy开发循环wx:for需要注意 item index值必须在wx:for之后使用 <view wx:for="{{tablist}}" class=" ...

  3. 微信小程序-用户拒绝授权使用 wx.openSetting({}) 重新调起授权用户信息

    场景模拟:用户进入微信小程序-程序调出授权 选择拒绝之后,需要用到用户授权才能正常使用的页面,就无法正常使用了. 解决方法:在用户选择拒绝之后,弹窗提示用户 拒绝授权之后无法使用,让用户重新授权(微信 ...

  4. 微信小程序如何在使用wx.request使用cookie

    我主要是做asp.net mvc后端开发的,经常使用Jquery的ajax与后台的Web API进行数据交互. 最近公司要做一个小程序,要实现小程序与Web前端的通信,当然小程序是可以实现socket ...

  5. 微信小程序的坑之wx.miniProgram.postMessage

    工作中有个需求是小程序的网页在关闭的时候,需要回传给小程序一个参数 查阅小程序官方文档,有这样一个接口 wx.miniProgram.postMessage ,可以用来从网页向小程序发送消息,然后通过 ...

  6. 微信小程序组件——详解wx:if elif else的用法

    背景 在学习微信小程序开发wxml页面时,需要使用if,else来判断组件是否进行展示,代码如下 <view wx:if="{{is_login==1}}">成功登录& ...

  7. 微信小程序踩坑之一[wx.request]请求模式

    最近在做小程序时,使用wx.request()方法请求时, 当使传输string类型时,一定要声明method请求模式为post,否则会一直报错,而不声明时默认为get, 已填坑 =,= wx.req ...

  8. 微信小程序节点查询方法:wx.createSelectorQuery()的使用场景与注意事项

    小程序由于内置于微信,这使得它有了得天独厚的宣传和使用优势,本着学习的心态,我在官网上看了一遍开发文档,大致得出小程序框架的设计模式与使用注意事项(重点来了,其实开发文档某些方面叙述的并不仔细,甚至存 ...

  9. 微信小程序---人脸识别(wx.startFacialRecognitionVerify)

    1.由于人脸核验功能涉及到用户的敏感.隐私信息,因此调用此接口的业务方,需要满足一定的条件,申请小程序的人脸识别api.开通小程序后台的接口权限入口后,开发者可以登录mp.weixin.qq.com小 ...

  10. 微信小程序(mpvue) wx.openSetting 无法调起设置页面

    在开发过程有个需要保存图片/视频到设备相册的业务,so easy~   巴啦啦撸下来了完整功能, wx.saveVideoToPhotosAlbum 会自动调起用户授权,美滋滋~~   btu.... ...

随机推荐

  1. 20145234黄斐《java程序设计》实验四—Android程序设计

    实验过程: JDK.Android Studio的安装: 参见卢晓明博客:http://www.cnblogs.com/lxm20145215----/p/5444207.html 注意事项:解决Fe ...

  2. c++ 预处理和多重替换

     预处理概念  #include  #define  extern 一. 预处理概念 在源代码编译成机器指令之前,都要进行预处理. 预处理阶段一般会在编译之前处理和修改C源代码.完成预处理后预 ...

  3. guacamole实现RDP的下载

    1. 配置说明 1.1 主要特别配置以下三项 enable-drive 默认情况下禁用文件传输,但启用文件传输后,RDP用户可以将文件传输到持久存在于Guacamole服务器上的虚拟驱动器.通过将此参 ...

  4. 常见面试算法题JS实现-仅用递归函数和栈操作逆序一个栈

    前言: 因为JAVA和JS语言特性的不同,有些东西在JAVA中可能需要一些技巧和手段才能实现的复杂程序,但是在JS中可能就是天然存在的,所以这套书里面的题目不会全部用JS去实现一遍,因为可能JS的实现 ...

  5. Discuz x3.2利用阿里云cdn处理https访问亲测教程

    第一步配置cdn和https 1.首先去阿里云.腾讯云.七牛云等申请免费https证书 2.虚拟主机是不能直接支持https的,需要cdn处理后才可以,并且端口是80 3.开启cdn加速处理,(买一个 ...

  6. Jmeter+Badboy安装使用文档

                  Jmeter+Badboy安装使用文档       目录   1.jmeter安装    1 2.Jmeter基础使用    3 3. 使用Jmeter进行分布式测试    ...

  7. sqlite导入mysql

    在线阅读地址 http://wenku.baidu.com/view/cc6821a8482fb4daa58d4bb8

  8. Siki_Unity_3-6_UI框架 (基于UGUI)

    Unity 3-6 UI框架 (基于UGUI) 任务1&2&3&4:介绍 && 创建工程 UI框架: 管理场景中所有UI面板 控制面板之间的跳转 如果没有UI框 ...

  9. linux 下awk后统计某一列数据之和简单的命令

    例如有文件test.txt格式如下: aaa:1 bbb:2 cat a|awk -F\: '{print"+"$2}'|xargs echo 0|bc -l

  10. 【转载】pycharm常用快捷键

    来源: (https://blog.csdn.net/weixin_41059146/article/details/78826163) 1.编辑(Editing) Ctrl + Space    基 ...