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

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

@jaylen.trantow 

Дополню ответ, что в Svelte также имеется возможность использовать инструкцию {#await} для работы с промисами внутри циклов. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<script>
  import { fetchData } from './api';

  let itemsPromise = fetchData();

  let items;
  let error;

  async function loadItems() {
    try {
      items = await itemsPromise;
    } catch (err) {
      error = err.message;
    }
  }
</script>

{#await itemsPromise}
  <p>Loading...</p>
{:then}
  {#each items as item}
    <div>{item.name}</div>
  {/each}
{:catch error}
  <p>{error}</p>
{/await}

В данном примере, мы используем промис для получения данных и выводим загрузочное сообщение при ожидании данных, а затем отображаем полученные элементы. В случае возникновения ошибки при загрузке данных, выводим сообщение об ошибке.

Таким образом, циклы в Svelte предоставляют мощные инструменты для работы с повторяющимися элементами и данными, позволяя создавать динамический контент в приложениях.