Чтобы зациклить элементы HTML во Vue, вы должны использовать директиву цикла v-for непосредственно на целевых элементах.
Когда Vue визуализирует компонент, он будет итерировать целевой элемент с той же концепцией, что и обычный цикл JavaScript for.
Основа v-for
Базовый синтаксис, v-for следует использовать так:
v-for="(item, index) in items" :key="index"Предыдущий пример показывает, что мы перебираем список элементов. У нас есть доступ к одному элементу и его индексу в каждой итерации. :key — обязательный атрибут, действующий как уникальный идентификатор каждого повторяющегося элемента, отображаемого для движка Vue.
Когда содержимое ключа или элемента изменяется программно или из-за взаимодействия с пользователем, движок Vue запускает обновление измененного элемента в
пользовательском интерфейсе. Если у вас есть несколько циклов в одном компоненте, вы должны рандомизировать атрибут key дополнительными символами или строками, связанными с контекстом, чтобы избежать конфликты дублирования атрибута key.
Существуют различные варианты использования этого направления. Один из простых вариантов использования
заключается в выполнении анонимных циклов, в которых вы можете определить число X как
символический список, и цикл будет повторяться X раз. Это может быть удобно в
ситуации, в которых вы строго контролируете количество итераций, которые вы хотите отображать.
В следующем примере мы видим анонимный цикл, в котором общее число итераций - 2, и мы определяем ключ с префиксом loop-1:
<template>
<div v-for="n in 2" :key="'loop-1-' + n">
{{ n }}
</div>
<template>Вы также можете использовать литералы шаблонов (с обратными кавычками) из ES6 для генерирования содержимого строк без +:
<template>
<div v-for="n in 5" :key="`loop-2-${n}`">
{{ n }}
</div>
<template>Теперь, когда мы рассмотрели, как обрабатывать базовые циклы с помощью v-for, мы будет использовать эту функцию в упражнении.
В этом упражнении мы собираемся создать анонимный цикл, используя Vue для директива. Это будет знакомо тем, кто использовал for или forEach
циклы в JavaScript раньше.
Создайте новый компонент и импортируйте его в App.js, как указано в упражнении.
Мы создаем новый компонент с элементом <h1> и пустой список ul:
<template>
<h1>Looping through arrays</h1>
<ul>
<li></li>
</ul>
</template>В разделе script давайте добавим атрибут setup к тегу сценария. Затем объявим массив интересов, содержащий некоторые строки следующим образом:
<script setup>
const interests = ['TV', 'Games', 'Sports']
</script>Теперь вернемся к разделу шаблонов и добавим директиву v-for к тегу <li> в перебирать интересы. Для каждой итерации мы получаем комбинацию (элемент, индекс)
из интересов, в котором item выводит строку массива, а index — это индекс цикла.
Мы сопоставляем атрибут key с индексом и отображаем значение элемента, как показано ниже.
<template>
<h1>Looping through arrays</h1>
<ul>
<li v-for="(item, index) in interests" :key="index">{{ item }}</li>
</ul>
</template>В результате вы увидите заголовок и проитерированный список интересов.
В этом упражнении мы научились перебирать определенный массив, выводя строковое значение или индекс его элементов. Мы также узнали, что
ключевой атрибут должен быть уникальным, чтобы избежать конфликтов DOM.
Далее давайте поэкспериментируем с итерацией коллекции объектов.