循环 Loop

让一个组件按数组重复 N 次渲染。本质上是给容器(vstack / hstack / zstack / grid) 设置一个循环数据源。

提示

循环不是一个独立组件,而是任意容器都能开启的能力。配置在容器属性里。

第一步:JS 准备数组

this.list = [
  { name: "苹果",   price: 5 },
  { name: "香蕉",   price: 3 },
  { name: "橙子",   price: 4 }
]

选中容器(比如 vstack),在属性里找到循环数据源(dataSource),填:

{list[item]}

含义:遍历 list,每一项命名为 item,然后子组件就能用 item.xxx。

容器内放一个 hstack,里面:

效果:

苹果       ¥5
香蕉       ¥3
橙子       ¥4

支持容器套容器,每层独立循环。

this.tables = [
  { title: "水果", items: [{n:"苹果"},{n:"香蕉"}] },
  { title: "蔬菜", items: [{n:"白菜"},{n:"菠菜"}] }
]

外层 vstack:

如果数组为空,循环就不会渲染任何子节点(空白)。

this.list = []   // 安全,不会报错,容器变空

这是新行为

旧版本空数组会整个容器都不显示,可能造成布局错乱。现在空数组只是"循环出 0 次",容器本身仍在。

循环里如果想读外层的全局变量,而循环变量名又恰好同名,用 $. 前缀强制读全局:

this.row = "外层"            // 全局
this.list = [{ row: "内层" }]

容器数据源 {list[row]},内部 text 写:

详细规则见占位符语法。