微信小程序 wx:for循环

循环数组:

  1. 一般数组:[1, 2, 3, 4, 5, ‘a‘, ‘m‘]

  2. 包含对象的数组:[ { key: value, ... }, { key: value, ...}]

  注: 一般数组中可以使用wx:key=‘*this’, 复杂数组使用wx:key=‘对象中唯一的属性’

<view>
  <view wx:for="{{test}}" wx:for-item=‘item‘ wx:for-index="index" wx:key=‘id‘>
    {{item.name}}
    --
    {{item.age}}
  </view>

  <view wx:for="{{list}}" wx:for-item=‘item‘ wx:for-index="index" wx:key=‘*this‘>
    {{item}}
  </view>
</view>

循环对象:

  对象数据:{key: value, ...}

  注:wx:key等于一个对象中的属性,且该属性唯一即可

<!-- 对象循环 -->
<view>
  <view wx:for="{{shopping}}" wx:for-item=‘value‘ wx:for-index="key" wx:key=‘food‘>
    {{key}}
    --
    {{value}}
  </view>
</view>

 

补充小知识:

  block标签:占位标签,编写时使用block,在页面渲染时,block标签会自动被小程序移除,只保留其内部内容

<!-- block标签 -->
<view>
  <block wx:for="{{test}}" wx:key=‘id‘>
    {{item.name}}
    ---
    {{item.age}}
  </block>
</view>

 

微信小程序 wx:for循环

上一篇:laravel 验证类使用validate &validator 简单实例


下一篇:50.快速排序