Conditions v-if

Rendu conditionnel

Certains éléments sont pertinents à afficher uniquement lorsqu'ils contiennent une valeur.

Par exemple, une bulle permettant d'afficher la date de naissance d'une personne n'est désirable que s'il y a une date à afficher. Si cette information n'est pas fournie, avoir une bulle vide est indésirable:

<div class="bubble" v-if="birth">{ { birth } }</div> Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes.


Rendu conditionnel Autre condition

Outre le fait de vérifier si une donnée est vide ou non, il est aussi possible d'ajouter une condition de comparaison directement dans v-if.

Par exemple:

<div class="bubble" v-if="birth>=2000">{ { birth } }</div> Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes.

Ou encore comparer la valeur de deux paramètres:

<div class="bubble" v-if="firstName==lastName">{ { firstName } }</div> Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes.