Conditions dans les boucles avec Vue

Lors de l'itération d'éléments avec des boucles, il est possible d'appliquer des conditions. Mais les directives v-for et v-if doivent être écrites sur des balises différentes, sinon il y aura un conflit. Pour éviter un conflit de directives, la directive v-for est appliquée à la balise template, et la directive v-if est appliquée directement à la balise insérée.

Regardons un exemple. Supposons que nous ayons le tableau suivant :

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

Itérons ce tableau avec une boucle :

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

Maintenant, appliquons une condition sur les éléments affichés :

<template>
	<ul>
		<template v-for="elem in arr">
			<li v-if="elem % 2 === 0">
				{{ elem }}
			</li>
		</template>
	</ul>
</template>

Le tableau suivant est donné :

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

Itérez ce tableau avec une boucle et affichez uniquement les éléments positifs du tableau.