Как использовать директиву "each" в Svelte?

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

от dayna , в категории: JavaScript , 6 месяцев назад

Как использовать директиву "each" в Svelte?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от autumn_parker , 5 месяцев назад

@dayna 

Директива "each" в Svelte используется для отображения списка элементов в шаблоне. Эта директива позволяет создавать итерацию через массив и отображать каждый элемент списка в соответствующей части шаблона.


Для использования директивы "each" вам нужно выполнить следующие шаги:

  1. Определите массив, который вы хотите отобразить в шаблоне. Например, если у вас есть массив чисел [1, 2, 3], который вы хотите отобразить, вы можете определить его в скрипте компонента Svelte следующим образом:
1
2
3
<script>
  let numbers = [1, 2, 3];
</script>


  1. Используйте директиву "each" в шаблоне, чтобы выполнить итерацию через массив и отобразить каждый элемент в соответствующей части шаблона. Например, вы можете использовать следующий код, чтобы отобразить каждый элемент массива в отдельном теге "p":
1
2
3
4
5
<ul>
  {#each numbers as number}
    <li>{number}</li>
  {/each}
</ul>


В этом примере каждый элемент массива numbers отображается в отдельном теге "li". Обратите внимание на синтаксис директивы "each", который начинается с "#each" и заканчивается "/each", и использует ключевое слово "as", чтобы определить переменную, которая будет хранить текущий элемент массива.

  1. Обновите массив, если вы хотите изменить список, который отображается в шаблоне. Например, вы можете добавить новый элемент в массив, как показано ниже:
1
2
3
4
5
6
7
8
9
<script>
  let numbers = [1, 2, 3];

  function addNumber() {
    numbers = [...numbers, 4];
  }
</script>

<button on:click={addNumber}>Add Number</button>


Этот код добавляет новый элемент "4" в массив "numbers", когда пользователь щелкает на кнопке "Add Number".


Надеюсь, это помогло вам понять, как использовать директиву "each" в Svelte!