Itération sur les tableaux dans Vue

Vue permet de générer des balises en boucle. Cela se fait à l'aide d'une directive spéciale v-for. Voyons comment elle fonctionne pour les tableaux. Pour cela, créons le tableau suivant :

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

Affichons chaque élément de ce tableau dans son propre paragraphe. Pour cela, dans le template, commençons par créer un paragraphe :

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

Maintenant, ajoutons à notre paragraphe la directive v-for. La valeur de cette directive doit spécifier le nom du tableau à itérer et la variable qui contiendra successivement chaque élément de ce tableau. Dans notre cas, le nom du tableau est arr, et pour la variable, nous choisirons le nom elem :

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

En conséquence, notre paragraphe se répétera autant de fois qu'il y a d'éléments dans notre tableau. Affichons les éléments itérés dans le texte de nos paragraphes :

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

Soit le tableau suivant stocké dans data :

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

Affichez chaque élément de ce tableau dans sa propre balise div.

Soit le tableau suivant :

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

Affichez le carré de chaque élément de ce tableau dans sa propre balise div.

Soit le tableau suivant :

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

Affichez les éléments de ce tableau sous forme de liste ul.