Итерација на низи во 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],
  }
}