xsl 模板 循环_苗条的模板：循环

xsl 模板 循环

In Svelte templates you can create a loop using the {#each}{/each} syntax:

在Svelte模板中，您可以使用{#each}{/each}语法创建循环：

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

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

If you are familiar with other frameworks that use templates, it’s a very similar syntax.

如果您熟悉使用模板的其他框架，则其语法非常相似。

You can get the index of the iteration using:

您可以使用以下方法获取迭代的索引：

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

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

(indexes start at 0)

(索引从0开始)

When dynamically editing the lists removing and adding elements, you should always pass an identifier in lists, to prevent issues.

动态编辑列表中的删除和添加元素时，应始终在列表中传递标识符，以防止出现问题。

You do so using this syntax:

您可以使用以下语法：

<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}

You can pass an object, too, but if your list has a unique identifier for each element, it’s best to use it:

您也可以传递一个对象，但是如果列表中每个元素都有一个唯一的标识符，则最好使用它：

<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}

翻译自: https://flaviocopes.com/svelte-templates-loops/

xsl 模板 循环