Iterazione di array in Vue

Vue consente di generare tag in un ciclo. Questo viene fatto utilizzando una speciale direttiva v-for. Diamo un'occhiata a come funziona per gli array. Per fare ciò, creiamo il seguente array:

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

Visualizziamo ogni elemento di questo array in un paragrafo separato. Per fare ciò, nel template creiamo innanzitutto un paragrafo:

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

Ora aggiungiamo al nostro paragrafo la direttiva v-for. Come valore di questa direttiva dovremmo specificare il nome dell'array da iterare e la variabile in cui verranno inseriti sequenzialmente gli elementi di questo array. Nel nostro caso, il nome dell'array sarà arr, e per la variabile inventeremo il nome elem:

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

Di conseguenza, il nostro paragrafo si ripeterà tante volte quanti sono gli elementi nel nostro array. Visualizziamo gli elementi iterati nel testo dei nostri paragrafi:

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

Supponiamo che in data sia memorizzato il seguente array:

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

Visualizza ogni elemento di questo array nel proprio tag div.

Dato il seguente array:

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

Visualizza il quadrato di ogni elemento di questo array nel proprio tag div.

Dato il seguente array:

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

Visualizza gli elementi di questo array sotto forma di lista ul.