如何在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}

<!-- with the index -->
{#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}

<!-- with the index -->
{#each goodDogs as goodDog, index (goodDog.id)}
	<li>{goodDog.name}</li>
{/each}