迴圈渲染
本頁說明 :for 如何展開陣列與物件，以及迴圈內可以存取哪些變數。
陣列
<ul>
<li :for="item in items">{{ item }}</li>
<li :for="(item, index) in items">{{ index }}. {{ item }}</li>
</ul>
<script>
const app = new QUI({ id: "app", data: { items: ["A", "B", "C"] } });
</script>
| 寫法 | 變數 |
|---|---|
item in list |
item 為項目 |
(item, index) in list |
另有從 0 開始的 index |
物件
<ul>
<li :for="(key, value) in user">{{ key }}: {{ value }}</li>
</ul>
<script>
const app = new QUI({ id: "app", data: { user: { name: "Pardn", role: "Developer" } } });
</script>
第一個變數是 key、第二個是 value；只寫一個變數時只取得 key。
作用域
| 可存取 | 說明 |
|---|---|
| 迴圈變數 | item、index（或 key、value） |
| 來源集合 | 從根資料以同名取得，例如 items |
| 根資料 | 迴圈作用域找不到時回到 app.data 查找 |
| 外層迴圈變數 | 不可存取；巢狀迴圈的內層只看得到自己的變數與根資料 |
<div :for="group in groups">
<h3>{{ group.name }}</h3>
<p :for="member in group.members">{{ member }}</p>
</div>
內層的來源路徑 group.members 可以使用外層變數，但內層元素中的 {{ group.name }} 不會被替換。