Affichage conditionnel dans Vue

La directive suivante que nous allons étudier s'appelle v-if. Elle permet d'afficher ou de masquer des éléments. Son fonctionnement est le suivant : elle prend comme paramètre n'importe quelle propriété de l'objet data. Si cette propriété a la valeur true - alors l'élément sera affiché, et si false - il sera masqué.

Regardons un exemple. Supposons que nous ayons un paragraphe avec l'attribut v-if. La valeur de cet attribut est la propriété visible, comme ceci :

<template>
	<p v-if="visible">texte</p>
</template>

Définissons la valeur de notre propriété à true. Dans ce cas, le paragraphe sera affiché :

data() {
	return {
		visible: true,
	}
}

Mais si visible est défini à la valeur false, alors le paragraphe sera masqué :

data() {
	return {
		visible: false,
	}
}

Supposons que data contienne une propriété visible. Supposons également que vous ayez deux paragraphes. Faites en sorte que le premier paragraphe soit affiché à l'écran si la propriété visible est égale à true, et que le deuxième paragraphe, au contraire, soit affiché si la propriété visible est égale à false.