列表渲染

    • 支持指定索引和当前项名称,for="p,index in persons"for="(p,index) in persons"均可

      1. <view><view for="(item, index) in list"></view></view>
      2. <view><view for="item, index in list"></view></view>
    • 支持以数字作为取值范围

      1. <!-- 遍历出的结果是 1 2 3 4 5-->
      2. <view for="item in 5">{{item}}</view>

    遍历对象

    • 仅指定对象的属性值
      1. <view for="value,key in obj"></view>
    • 支持使用of替代in作为分隔符

      1. <view for="item of obj">{{item}}</view>
      2. <!-- 相当于 -->
      3. <view for="item in obj">{{item}}</view>

    block 是虚拟标签,可以用 for 来循环渲染一组组件或者标签。

    1. <block for="item, index in list"> <span>A</span> <span>B</span> </block>

    for 和 if 共存

    支持在同一个标签中使用for和,在if的属性值中可以获取for的索引或当前项变量。如下:

    1. <view if="list.length">
    2. <view for="item,index in list">hello:{item}</view>
    3. </view>

    区别于上述的 forif 共存。 forelse/elif/else-if共存时,else/elif/else-if的优先级高于 for
    原因是,else/elif/else-if必须紧跟在 if/else-if/elif 分支后,在for 循环中重复 else 无意义且会导致解析错误。在for 循环中重复 elif/else-if 容易导致错误或者难以理解。以下是正确的使用方式

    1. <view elif="conditionB" for="item,index in listA">hello B! {{item}}</view>
    2. <view else for="item,index in listB">hello B! {{item}}</view>

    !> forifelse 三者并存时,请不要 使用 for if 并存写法,因为 并存 for 优先级高, 这种情况下会报错,请使用 block 标签自行包裹一层

    嵌套的 for

    允许嵌套使用,索引名和当前项变量名可以相同(但是从质量和可读性角度不建议这样命名)

    1. <!-- good -->
    2. <view for="(menu, index) in list">
    3. <view for="(item, itemIndex) in menu">
    4. {{itemIndex}} : {{item}}
    5. </view>
    6. </view>
    7. <!-- bad -->
    8. <view for="(item, index) in list">
    9. <view for="(item, index) in item">
    10. {{index}} : {{item}}
    11. </view>

    关于数组数据操作,参考。