Цикл, директива v-for в Vue

Vue позволяет формировать теги в цикле. Это делается с помощью специальной директивы v-for. Давайте посмотрим, как она работает для массивов. Для этого сделаем следующий массив:

App.vuedata()
{
    return {
        arr: ['a', 'b', 'c'],
    }
}

Давайте выведем каждый элемент этого массива в отдельном абзаце. Для этого в представлении для начала сделаем абзац и напишем нашему абзацу директиву v-for:

App.vue<template>
    <p v-for="elem in arr">{{ elem }}</p>
</template>

Значением этой директивы следует указать имя перебираемого массива и переменную, в которую последовательно будут попадать элементы этого массива. В нашем случае имя массива будет arr, а для переменной мы придумаем имя elem. В результате наш абзац повторится столько раз, сколько элементов в нашем массиве.

Получение ключей при переборе массивов

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

App.vue<template>
    <p v-for="(elem, key) in arr">
        {{ key }} {{ elem }}
    </p>
</template>

Перебор объектов

Объекты также перебираются с помощью директивы v-for. Давайте посмотрим, как это делается. Пусть у нас есть следующий объект:

App.vuedata()
{
    return {
        obj: {a: 1, b: 2, c: 3},
    }
}

Переберем этот объект циклом и выведем его элементы:

App.vue<template>
    <p v-for="elem in obj">
        {{ elem }}
    </p>
</template>

А теперь выведем ключи, элементы, порядковые номера элементов в объекте:

App.vue<template>
    <p v-for="(elem, key, index) in obj">
        {{ index }}
        {{ key }}
        {{ elem }}
    </p>
</template>

Перебор группы тегов

Иногда нам нужно формировать в цикле сразу на группу тегов. В этом случае мы можем объединить их общим родителем и применить цикл к нему:

<template>
    <div v-for="elem in arr">
        <p>{{ elem }}</p>
    </div>
</template>

Иногда нам не хотелось бы объединять теги общим родителем. В этом случае их можно объединить тегом template, применив цикл к этому тегу. Этот тег объединяет другие теги, но не попадает в итоговую верстку:

<template>
    <template v-for="elem in arr">
        <p>{{ elem }}</p>
    </template>
</template>

Перебор массива объектов

Научимся теперь перебирать массив объектов. Посмотрим на примере. Пусть есть следующий массив:

App.vuedata() {
    return {
        users: [
            {
                name: 'name1',
                surn: 'surn1',
            },
            {
                name: 'name2',
                surn: 'surn2',
            },
            {
                name: 'name3',
                surn: 'surn3',
            },
        ]
    }
}

Давайте переберем наш массив циклом и для каждого юзера в отдельном абзаце будем выводить его имя и фамилию:

App.vue<template>
    <p v-for="user in users">
        {{ user.name }}
        {{ user.surn }}
    </p>
</template>

Цикл в диапазоне

Можно сделать так, чтобы цикл повторился заданное количество раз. Это делается следующим образом:

App.vue<template>
    <p v-for="num in 10">
        {{ num }}
    </p>
</template>