Iterarea array-urilor în Vue

Vue permite generarea de tag-uri într-o buclă. Acest lucru se face folosind o directivă specială v-for. Să vedem cum funcționează pentru array-uri. Pentru aceasta, să creăm următorul array:

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

Să afișăm fiecare element al acestui array într-un paragraf separat. Pentru aceasta, în template pentru început să creem un paragraf:

<template>
	<p></p>
</template>

Acum să scriem directivei v-for paragrafului nostru. Ca valoare a acestei directive trebuie indicat numele array-ului de iterat și variabila în care vor fi plasate succesiv elementele acestui array. În cazul nostru, numele array-ului va fi arr, iar pentru variabilă vom alege numele elem:

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

Ca rezultat, paragraful nostru se va repeta de atâtea ori câte elemente sunt în array-ul nostru. Să afișăm elementele iterate în textul paragrafelor noastre:

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

Fie în data stocat următorul array:

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

Afișați fiecare element al acestui array în propriul său tag div.

Este dat următorul array:

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

Afișați pătratul fiecărui element al acestui array în propriul său tag div.

Este dat următorul array:

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

Afișați elementele acestui array sub forma unei liste ul.