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}

Скачать мою бесплатнуюСправочник Svelte


Более стройные уроки: