Перебор массивов в Vue
Vue позволяет формировать теги в цикле.
Это делается с помощью специальной
директивы v-for. Давайте посмотрим,
как она работает для массивов.
Для этого сделаем следующий массив:
data() {
return {
arr: ['a', 'b', 'c'],
}
}
Давайте выведем каждый элемент этого массива в отдельном абзаце. Для этого в представлении для начала сделаем абзац:
<template>
<p></p>
</template>
Теперь напишем нашему абзацу
директиву v-for. Значением
этой директивы следует указать
имя перебираемого массива и
переменную, в которую последовательно
будут попадать элементы этого
массива. В нашем случае имя
массива будет arr,
а для переменной мы придумаем
имя elem:
<template>
<p v-for="elem in arr"></p>
</template>
В результате наш абзац повторится столько раз, сколько элементов в нашем массиве. Давайте будем выводить перебираемые элементы в тексте наших абзацев:
<template>
<p v-for="elem in arr">{{ elem }}</p>
</template>
Пусть в data хранится следующий массив:
data() {
return {
items: [1, 2, 3, 4, 5],
}
}
Выведите каждый элемент этого
массива в своем теге div.
Дан следующий массив:
data() {
return {
items: [1, 2, 3, 4, 5],
}
}
Выведите квадрат каждого элемента
этого массива в своем теге div.
Дан следующий массив:
data() {
return {
items: [1, 2, 3, 4, 5],
}
}
Выведите элементы этого
массива в виде списка ul.