wx:for="{{list}}"用来循环数组,而list即为数组名wx:for-item="items" 即用来定义一个循环过程中每个元素的变量的

如果是一维数组,按照如下方式循环出来:

  1. <view wx:for="{{list}}">
  2.  
  3.   {{index}} {{item.name}}
  4.  
  5. </view>

以上代码中,item即为list的别名。

如果是二维甚至多维数组,按照如下方式循环:

  1. <view wx:for="{{parentList}}">
  2.  
  3.   {{item.id}}
  4.  
  5.   <view wx:for="{{item.childList}}" wx:for-item="items">
  6.  
  7.     {{items.name}}{{item.account}}
  8.  
  9.   </view>
  10.  
  11. </view>
  12.  
  13. for (var i = 0 ; i < list.length; i++) {
  14.  
  15.   var xxx = list[i];
  16.  
  17. }

等同于

  1. <view wx:for="{{list}}" wx:for-item="xxx"></view>

谨记:wx:for是循环数组,wx:for-item即给列表赋别名

以下为几个错误使用,请大家谨慎使用:

1.直接用wx:for-item ,这样是循环不出来列表的

  1. <view wx:for-item="{{list}}">
  2.  
  3. {{index}} {{item.name}}
  4.  
  5. </view>

2.子循环中慎用wx:for-item

  1. <view wx:for="{{parentList}}">
  2.  
  3. {{item.id}}
  4.  
  5. <view wx:for-item="{{item.childList}}" wx:for-item="items">
  6.  
  7. {{items.name}}{{items.account}}
  8.  
  9. </view>
  10.  
  11. </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. WPF设置全局字体和字体嵌入

    原文:WPF设置全局字体和字体嵌入 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/CLeopard/article/details/40590373 ...

  2. PostgreSQL的hook机制初步学习

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面:PostgreSQL内部结构与源代码研究索引页    回到顶级页面:PostgreSQL索引页 本文的目的一是为了备忘,二是为了抛砖引玉,希望 ...

  3. [并发并行]_[C/C++]_[C++标准库里的线程安全问题]

    场景 1.写普通的程序时, 经常会使用cout来做输出, 每个进程只有一个控制台, 如果多线程调用cout时会出状况吗? 2.之所以研究cout会不会在并发下调用有问题, 是因为曾经有一个bug的崩溃 ...

  4. 5469: [FJOI2018]领导集团问题

    5469: [FJOI2018]领导集团问题 链接 题意: 要求在一棵树内选一个子集,满足子集内的任意两个点u,v,如果u是v的祖先,那么u的权值小于等于v. 分析: dp[u][i]表示在u的子树内 ...

  5. 【SoDiaoEditor电子病历编辑器更新啦】--谨以献给那些还在医疗行业奋斗的小伙伴们

    为什么推荐的人这么少~~~~   更新(2017-4-18): 截止目前已知的已有2个三甲医院在使用该编辑器,容我内心澎湃以下,O(∩_∩)O哈哈~   先放github地址:https://gith ...

  6. Java实现Oracle的to_char函数

    /** * 将int.long.double.float.String.Date等类型format成字符类型 * * 一.数字format格式处理: * 01)99.99的实现,小数位四舍五入不够位数 ...

  7. 用人工智能学习,凡亿推出PCB问题解答智能搜索机器人:pcb助手

    对于学习者,你是不是经常遇到这样的问题:在我们狠狠下定决心学习PCB技术的时候,我们常常遇到很多大大小小的问题,遗憾的是身边没有一个能及时给自己解答问题的高手指点,通过论坛.群等方式询问可能半天也得不 ...

  8. sklearn 中的 Pipeline 机制

    转载自:https://blog.csdn.net/lanchunhui/article/details/50521648 from sklearn.pipeline import Pipeline ...

  9. Selenium笔记:PO模型

    所有用到的页面都定义成一个类,继承自基础的Page类 把页面中用到的元素定义成方法 把页面上一些操作定义成方法

  10. 【Unity Shader】Shader基础

    目录 Chapter3 Unity Shader 基础 Chapter3 Unity Shader 基础 概述 在Unity需要材质(Material)与Unity Shader配合使用来达到满意的效 ...