# Перебор массивов в 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`.

← →
↑