Перебор массивов в Vue

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

javascriptdata() {
  return {
    arr: ['a', 'b', 'c'],
  }
}

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

App.vue<template>
  <p></p>
</template>

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

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

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

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

javascriptdata() {
  return {
    items: [1, 2, 3, 4, 5],
  }
}

javascriptdata() {
  return {
    items: [1, 2, 3, 4, 5],
  }
}

javascriptdata() {
  return {
    items: [1, 2, 3, 4, 5],
  }
}