Как использовать циклы в Svelte?

Пользователь

от jaylen.trantow , в категории: JavaScript , 9 месяцев назад

Как использовать циклы в Svelte?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от deshaun_cormier , 9 месяцев назад

@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". Мы не используем значение элементов массива, поэтому используем символ _ для их игнорирования.