Svelte模板：循環

學習如何在Svelte模板中使用循環

在Svelte模板中，你可以使用{#each}{/each}語法創建循環：

<script>
let goodDogs = ['Roger', 'Syd']
</script>

{#each goodDogs as goodDog}
 <li>{goodDog}</li>
{/each}

如果你熟悉其他使用模板的框架，這個語法非常相似。

你可以通過以下方式獲取迭代的索引：

<script>
let goodDogs = ['Roger', 'Syd']
</script>

{#each goodDogs as goodDog, index}
 <li>{index}: {goodDog}</li>
{/each}

（索引從0開始）

在動態編輯列表時，刪除和添加元素時，總是應該在列表中傳遞一個標識符，以防止出現問題。

你可以通過以下語法來實現：

<script>
let goodDogs = ['Roger', 'Syd']
</script>

{#each goodDogs as goodDog (goodDog)}
 <li>{goodDog}</li>
{/each}

<!-- 同時使用索引 -->
{#each goodDogs as goodDog, index (goodDog)}
 <li>{goodDog}</li>
{/each}

你也可以傳遞一個對象，但如果你的列表中每個元素都有唯一的標識符，最好使用它：

<script>
let goodDogs = [
 { id: 1, name: 'Roger'},
 { id: 2, name: 'Syd'}
]
</script>

{#each goodDogs as goodDog (goodDog.id)}
 <li>{goodDog.name}</li>
{/each}

<!-- 同時使用索引 -->
{#each goodDogs as goodDog, index (goodDog.id)}
 <li>{goodDog.name}</li>
{/each}