Обхождане на масиви във 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],
  }
}