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. 2017-2018-1 20155317 《信息安全系统设计基础》课堂实践——实现mypwd

    2017-2018-1 20155317 <信息安全系统设计基础>课堂实践——实现mypwd 1 . 学习使用pwd 很显然pwd命令的意思是打印出该文件当前的绝对路径 2 . 了解pwd ...

  2. Direct3D中 SetTextureStageState 函数

    先说明几个概念: 1, Multipass(多通道)     将一个任务划分成几个阶段,由多个pass处理不同阶段,后续pass总是处理前一个pass的结果.例如复杂的光照方程可以分成几个pass来计 ...

  3. Redis学习之路(一)之缓存知识体系

    转自:https://www.unixhot.com/page/cache 缓存分层 缓存分级 内容 内容简介/主要技术关键词 用户层 DNS 浏览器DNS缓存 Firefox默认60秒,HTML5的 ...

  4. MIUI 10 已连接 但无法访问互联网 的解决方案

    wifi为 DHCP 时,我发现得到的总是已经有机器在用的 192.168.1.9  这台机器, 所以只需要手动配置一下ip就行了,随便指定一个,然后ping一下,ping不通的话就配上,然后再重新连 ...

  5. restful_framework之APIView

    一.安装djangorestframework 方式一:pip3 install djangorestframework 方式二:pycharm图形化界面安装 方式三:pycharm命令行下安装(装在 ...

  6. js 日期,时间函数 及相关运算大全

    一.在js中如何比较两个时间字符串的大小 方法一: function CompareDate(d1,d2){     return ((new Date(d1.replace(/-/g,"/ ...

  7. 使用web api开发微信公众号,调用图灵机器人接口(二)

    此文将分两篇讲解,主要分为以下几步 签名校验; 首次提交验证申请; 接收消息; 被动响应消息(返回XML); 映射图灵消息及微信消息; 此篇为第二篇. 被动响应消息(返回XML) 上一篇中,我们已经可 ...

  8. 动态加载与插件系统的初步实现(三):WinForm示例

    代码文件在此Download,本文章围绕前文所述默认AppDomain.插件容器AppDomain两个域及IPlugin.PluginProvider.PluginProxy3个类的使用与变化进行. ...

  9. requests.get()解析

    1.requests.get(url, params=None, headers=None, cookies=None, auth=None, timeout=None) Sends a GET re ...

  10. 14-Dockerfile常用指令

    下面列出了 Dockerfile 中最常用的指令,完整列表和说明可参看官方文档.FROM 指定 base 镜像. MAINTAINER设置镜像的作者,可以是任意字符串. COPY将文件从 build ...