@jaylen.trantow
В Svelte есть несколько способов использования циклов для вывода повторяющихся элементов.
Самый простой способ - использовать директиву {#each}
. Например, предположим, что у вас есть массив данных, который нужно отобразить в виде списка:
1 2 3 4 5 6 7 8 9 |
<script> let items = ['Apple', 'Banana', 'Orange']; </script> <ul> {#each items as item} <li>{item}</li> {/each} </ul> |
В этом примере мы использовали директиву {#each}
для обхода массива items
. Для каждого элемента массива мы создаем новый элемент списка, отображая его значение внутри тега <li>
.
Вы также можете использовать директиву {#each}
с индексом элемента, например:
1 2 3 4 5 |
<ul> {#each items as item, i} <li>{i + 1}. {item}</li> {/each} </ul> |
Здесь мы добавили вторую переменную i
, которая представляет индекс элемента в массиве. Мы используем этот индекс для отображения порядкового номера элемента.
Кроме того, вы можете использовать цикл each
внутри компонентов Svelte, например:
1 2 3 4 5 6 7 8 9 |
<script> export let items = ['Apple', 'Banana', 'Orange']; </script> <ul> {#each items as item} <li>{item}</li> {/each} </ul> |
Здесь мы экспортируем массив items
из компонента и используем директиву {#each}
для его отображения.
Наконец, в Svelte также есть возможность использовать цикл for
для генерации последовательности элементов, например:
1 2 3 4 5 |
<ul> {#each Array(3) as _, i} <li>Item {i + 1}</li> {/each} </ul> |
Здесь мы создаем массив длиной 3 с помощью Array(3)
, а затем используем директиву {#each}
для обхода массива и генерации трех элементов списка с текстом "Item 1", "Item 2" и "Item 3". Мы не используем значение элементов массива, поэтому используем символ _
для их игнорирования.