[toc]

wx:for绑定

定义数组

// pages/demo/demo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    "arr":[
      {
        id:0,
        name:"炒饭"
      },
        {
          id:2,
          name:"炒面"
        }
    ]
  }
})

定义循环体

<block wx:for="{{arr}}" wx:for-item="obj" wx:for-index="inx">
  <view>下标:{{inx}}---名称:{{obj.name}}</view>
</block>

项的变量名默认为 item wx:for--item 可以指定数组当前元素的变量名 下标
变量名默认为 index wx:for--index 可以指定数组当前下标的变量名

image.png

wx:key优化循环

使用以上可以看出,能够实现数组的遍历展示,但是发现打印台有警报
image.png

建议使用wx:key进行优化
修改wxml中的view显示,wx:key值为遍历元素唯一值,或者可以使用*this

<!--pages/demo/demo.wxml-->
<block wx:for="{{arr}}" wx:for-item="obj" wx:for-index="inx" wx:key="id">
  <view>下标:{{inx}}---名称:{{obj.name}}</view>
</block>

发现没有警报
image.png

如果遍历元素和下标,想更改名称,可以采用上述。如果不想更改可以使用item和index默认元素和下标值

<!--pages/demo/demo.wxml-->
<block wx:for="{{arr}}" wx:key="id">
  <view>下标:{{index}}---名称:{{item.name}}</view>
</block>

image.png

结构块block

渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素
image.png

image.png
image.png

Q.E.D.


只有创造,才是真正的享受,只有拚搏,才是充实的生活。