Tutoriel VueJS 3 – Rendu conditionnel

Une boutique doit dire si le produit est disponible. Vue propose deux outils pour afficher ou masquer un élément selon une condition : v-if et v-show. Ils se ressemblent, mais ne font pas la même chose.

Préparer la condition

Ajoutez un stock à l’état du composant :

<script setup>
import { ref } from 'vue'

const product = ref('T-Shirt')
const image = ref('/images/t-shirt-bleu.svg')
const inventory = ref(100)
</script>

v-if, v-else-if, v-else

v-if place un élément dans la page seulement si l’expression est vraie.

<p v-if="inventory > 10">En stock</p>

Pour couvrir plusieurs cas, chaînez avec v-else-if et v-else :

<div class="product-info">
  <h1>{{ product }}</h1>

  <p v-if="inventory > 10">En stock</p>
  <p v-else-if="inventory > 0">Bientôt en rupture</p>
  <p v-else>En rupture</p>
</div>

Un seul de ces trois paragraphes existe à la fois. Passez inventory à 5, puis à 0, et regardez le message changer.

Conditionner plusieurs éléments à la fois

Pour appliquer une condition à un groupe sans ajouter de div inutile, portez le v-if sur <template>. Cette balise ne produit rien dans le HTML final.

<template v-if="inventory > 0">
  <h2>Disponible</h2>
  <p>Expédié sous 48 heures.</p>
</template>

v-show

v-show répond au même besoin, avec une mécanique différente :

<p v-show="inventory > 0">Livraison sous 48 h</p>

L’élément est toujours présent dans le DOM. Quand la condition est fausse, Vue lui applique simplement display: none. Ouvrez l’inspecteur pour le vérifier :

<!-- inventory vaut 0, avec v-if : l’élément a disparu -->
<!--v-if-->

<!-- inventory vaut 0, avec v-show : l’élément est là, masqué -->
<p style="display: none;">Livraison sous 48 h</p>

Lequel choisir

La différence tient au coût de l’opération.

• v-if crée et détruit l’élément, et avec lui ses composants enfants et leurs états. Coût élevé au basculement, coût nul quand la condition est fausse.
• v-show ne fait que changer une propriété CSS. Coût élevé au premier rendu, puisque l’élément est toujours construit, coût quasi nul aux basculements suivants.

En pratique : v-show pour ce qui s’ouvre et se ferme souvent, comme un menu ou un panneau dépliant. v-if pour tout le reste, en particulier ce qui coûte cher à construire ou ne doit pas exister du tout dans certains cas.

v-if et v-for sur le même élément

Ne les combinez pas sur la même balise. La boucle v-for est le sujet du chapitre suivant. Depuis Vue 3, v-if a la priorité et s’évalue avant la boucle : la variable de boucle n’existe pas encore, ce qui provoque une erreur. Mettez le v-if sur un <template> intérieur, ou filtrez la liste dans une propriété calculée. Nous verrons les deux au chapitre 7.