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>

See the Pen DEMO VueJS | v-if by TIM Montmorency (@tim-momo) on CodePen.

En savoir plus sur Rendu conditionnel - Conditional Rendering

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>

Ou encore comparer la valeur de deux paramètres:

<div class="bubble" v-if="firstName==lastName">{{ firstName }}</div>