Iteración de arrays en Vue

Vue permite generar etiquetas en un bucle. Esto se hace usando la directiva especial v-for. Veamos cómo funciona para arrays. Para ello, creemos el siguiente array:

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

Mostremos cada elemento de este array en un párrafo separado. Para ello, en la vista, empecemos creando un párrafo:

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

Ahora agreguemos al nuestro párrafo la directiva v-for. Como valor de esta directiva debemos especificar el nombre del array a iterar y la variable en la que secuencialmente se colocarán los elementos de este array. En nuestro caso, el nombre del array será arr, y para la variable inventaremos el nombre elem:

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

Como resultado, nuestro párrafo se repetirá tantas veces como elementos haya en nuestro array. Mostremos los elementos iterados en el texto de nuestros párrafos:

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],
  }
}