Utiliser le rendu conditionnel

• 2 minutes

Quand vous utilisez des applications pilotées par les données, vous avez normalement besoin d’être en mesure de mettre à jour l’affichage en fonction de certaines valeurs. Vous avez peut-être besoin de modifier la couleur pour indiquer un avertissement, de désactiver une option non disponible ou de ne pas afficher de contrôle. Vue.js propose plusieurs directives pour déterminer si des éléments doivent s’afficher et comment ils doivent s’afficher.

Activer/désactiver la visibilité

Vous pouvez contrôler l’affichage d’un élément à l’aide de la directive v-show. v-show examine une valeur ou expression booléenne, puis détermine si un composant doit s’afficher. Comme vous l’aurez deviné, true signifie que le composant va s’afficher et false qu’il ne va pas s’afficher.

L’utilisation de v-show avec une expression qui prend la valeur true ou false est illustrée dans l’exemple suivant :

<div v-show="new Date().getMonth() < 3">It is the first quarter</div>

logique booléenne.

Vue.js prend en charge trois directives pour implémenter une logique booléenne : v-if, v-else-if et v-else. Comme vous l’aurez deviné, celles-ci correspondent parfaitement aux instructions if, else if et else traditionnelles.

<div v-if="new Date().getMonth() < 3">It is the first quarter</div>
<div v-else-if="new Date().getMonth() < 6">It is the second quarter</div>
<div v-else-if="new Date().getMonth() < 9">It is the third quarter</div>
<div v-else>It is the fourth quarter</div>

Les exemples précédents fonctionnent, car les directives if se comportent comme des blocs if en JavaScript. Quand une valeur true est détectée, le bloc est quitté. Ainsi, si le mois retourné est 2 pour le mois de mars (le comptage des mois calendaires commence à 0), le résultat du test est true sur la première ligne et les évaluations des trois lignes suivantes sont ignorées.