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:

data() {
	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:

<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:

<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:

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

Supongamos que en data se almacena el siguiente array:

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

Muestra cada elemento de este array en su propia etiqueta div.

Dado el siguiente array:

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

Muestra el cuadrado de cada elemento de este array en su propia etiqueta div.

Dado el siguiente array:

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

Muestra los elementos de este array en forma de lista ul.