V-if, V-show et V-for

Introduction#

Les directives V-if, V-show et V-for sont des fonctionnalités essentielles de Vue.js qui permettent de manipuler la structure et l'affichage des éléments dans un template. Dans ce chapitre, nous allons explorer en détail ces directives et comprendre comment les utiliser efficacement dans le développement d'applications Vue.js.

V-if#

La directive V-if permet de conditionner l'affichage d'éléments dans un template en fonction d'une expression booléenne. Lorsque l'expression est évaluée à true, les éléments sont rendus dans le DOM. En revanche, lorsque l'expression est évaluée à false, les éléments sont retirés du DOM.

Voici un exemple de code utilisant la directive V-if :

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

const isOpen = ref(false);
</script>

<template>
  <button class="btn btn-primary" @click="isOpen = !isOpen">
    {{ isOpen ? 'Fermer' : 'Ouvrir' }}
  </button>

  <ul v-if="isOpen" class="list-group mt-3">
    <li class="list-group-item">Pomme</li>
    <li class="list-group-item">Banane</li>
    <li class="list-group-item">Poire</li>
    <li class="list-group-item">Raisin</li>
  </ul>

  <ul v-else class="list-group mt-3">
    <li class="list-group-item">Listes cachées</li>
  </ul>
</template>

Dans cet exemple, un bouton est utilisé pour basculer la valeur de isOpen entre true et false. Lorsque isOpen est true, la liste de fruits est affichée, sinon un message "Listes cachées" est affiché à la place.

V-show#

La directive V-show est similaire à la directive V-if, mais au lieu de retirer les éléments du DOM lorsque l'expression est évaluée à false, elle utilise les styles CSS pour les rendre invisibles. Cela signifie que les éléments sont toujours présents dans le DOM, mais ils ne sont pas visibles à l'écran.

Voici un exemple de code utilisant la directive V-show :

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

const isOpen = ref(false);
</script>

<template>
  <button class="btn btn-primary" @click="isOpen = !isOpen">
    {{ isOpen ? 'Fermer' : 'Ouvrir' }}
  </button>

  <ul v-show="isOpen" class="list-group mt-3">
    <li class="list-group-item">Pomme</li>
    <li class="list-group-item">Banane</li>
    <li class="list-group-item">Poire</li>
    <li class="list-group-item">Raisin</li>
  </ul>
</template>

Dans cet exemple, la liste de fruits est toujours présente dans le DOM, mais lorsque isOpen est false, elle est rendue invisible à l'aide de styles CSS.

Il est important de noter que la directive V-show est plus performante que la directive V-if dans les cas où les éléments sont fréquemment affichés et masqués.

V-for#

La directive V-for permet d'itérer sur une liste d'éléments et de générer du contenu dynamique dans un template. Elle est similaire à une boucle for en programmation.

Voici un exemple de code utilisant la directive V-for :

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

const fruits = ref([
  {
    name: 'Pomme',
  },
  {
    name: 'Banane',
  },
  {
    name: 'Poire',
  },
  {
    name: 'Raisin',
  },
]);
</script>

<template>
  <h1>Liste de fruits</h1>
  <ul class="list-group mt-3">
    <li
      v-for="(fruit, index) in fruits"
      :key="`fruit-${index}`"
      class="list-group-item"
    >
      {{ fruit.name }}
    </li>
  </ul>
</template>

Dans cet exemple, la liste de fruits est itérée à l'aide de la directive V-for. Chaque élément de la liste est représenté par la variable fruit, et l'index de l'élément est représenté par la variable index. Le contenu de chaque élément est affiché à l'aide de l'expression “double moustaches” :

::: v-pre

{{ fruit.name }}

:::

La directive V-for est extrêmement utile pour générer du contenu dynamique à partir de données provenant d'une source externe ou d'un état interne de l'application.