Sobes.tech
Junior

Nommez les différences entre les directives v-show et v-if.

sobes.tech IA

Réponse de l'IA

v-if affiche conditionnellement un élément, en le supprimant complètement du DOM si la condition est fausse. v-show affiche toujours l'élément, mais alterne sa propriété CSS display entre none et sa valeur d'origine en fonction de la condition.

Différences en termes de performance / utilisation:

  • v-if : Rendu initial plus lourd, mais meilleure performance en cas de changements peu fréquents, car les éléments sont complètement retirés du DOM.
  • v-show : Rendu initial plus léger, mais préférable pour les éléments qui changent fréquemment, car il ne fait que changer la propriété CSS.

Exemple d'utilisation:

<!-- Utilisation de v-if -->
<template>
  <div v-if="isVisible">
    Ce bloc est visible uniquement si isVisible est vrai
  </div>

  <!-- Utilisation de v-show -->
  <div v-show="isVisible">
    Ce bloc est toujours dans le DOM, mais visible uniquement si isVisible est vrai
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
}
</script>