小程序-for循环遍历的使用

.js文件：

Page({

  /**

   * 页面的初始数据

   */

  data: {

    datas:[

      { title: '提交申请', txt: '选择服务类型，填写基本信息，提交' },

      { title: '材料审核', txt: '收到电网企业电话，与电网客户经理预约实地勘探时间、准备证明材料' },

      { title: '等待业扩配套项目施工', txt: '工作人员按约定时间上门装表接电' },

      { title: '竣工验收', txt: '工作人员按约定时间上门竣工验收' },

      { title: '上门安装', txt:'工作人员按约定时间上门装表接电'}

    ]

  }

})

.wxml文件：

<view class='neir' wx:for="{{datas}}" wx:key="title">

   <!-- 索引为index -->

   <text>{{index+1}}</text>

   <text>{{item.title}}</text>

   <view>{{item.txt}}</view>

</view>

释：关于wx:for的使用，相信用过angular.js和vue.js等框架的小伙伴们一眼就可以看出来了，没错，它们的用法其实是一样的，这里我们需要注意的是wx:key的使用

1、wx:key="字符串"

这个”字符串”代表在 for 循环的 datas中 item 的某个“属性”，比如这里的title和txt。

2、wx:key="*this"

这个关键字（*this）代表在 for 循环中的 item 本身，一般在没有键的数组里面使用，比如这个数组

arr: [1,2,3,4,5,6,7,8,9]

<view class='neir' wx:for="{{arr}}" wx:key="*this">

   <text>{{item}}</text>

</view>

巴特西

小程序-for循环遍历的使用

最新文章

热门文章