Rendu conditionnel Vue.js : v-if vs v-show

Les directives v-if et v-show nous permettent de restituer conditionnellement les éléments à l’écran : v-if via le DOM et v-show avec CSS.

Vue.js est une bibliothèque JavaScript utilisée pour créer des applications Web interactives. C’est l’une des bibliothèques les plus populaires en raison de son API facile à utiliser.

v-if et v-show sont deux directives qui nous permettent de restituer conditionnellement des éléments à l’écran. Dans cet article, nous verrons comment utiliser chacun d’eux et comparerons leurs différences.

v-si contre v-show

À la surface, v-if et v-show faire la même chose. Cependant, ils fonctionnent différemment en dessous.

v-if restitue conditionnellement l’élément et les enfants auxquels il est appliqué en les ajoutant et en les supprimant du DOM. Si la condition à laquelle nous passons v-if est truepuis il placera l’élément et ses enfants dans le DOM et l’affichera.

Sinon, l’élément ne sera pas placé dans le DOM et ne sera pas affiché. Il ne fera rien si la condition dans laquelle il est défini est false initialement.

v-show fonctionne en affichant et en masquant l’élément auquel il est appliqué avec CSS.

Utilisation de v-if pour rendre conditionnellement des éléments et des composants

Nous pouvons utiliser le v-if directive pour restituer les éléments et les composants de manière conditionnelle. Pour ce faire, nous pouvons faire quelque chose comme :

<template>
  <button @click="showMe = !showMe">Toggle</button>

  <h1 v-if="showMe">hello</h1>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      showMe: false,
    };
  },
};
</script>

utiliser v-if pour afficher l’élément h1 si la valeur d’attribut que nous transmettons v-if est true. Par conséquent, si showMe est true, alors le h1 sera affiché. Sinon, ce ne sera pas à l’écran.

showMe est une propriété réactive, elle restituera donc le composant si sa valeur change. Par conséquent, lorsque nous cliquons sur Basculer, « bonjour » s’affiche si showMe est true.

Nous pouvons utiliser le v-if directive avec v-else pour montrer autre chose si la valeur d’attribut que nous transmettons v-if est false. Nous mettons simplement l’élément avec le v-else directive comme frère direct de l’élément avec le v-if directif.

Par exemple, nous écrivons :

<template>
  <button @click="showMe = !showMe">Toggle</button>

  <h1 v-if="showMe">hello</h1>
  <h1 v-else>goodbye</h1>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      showMe: false,
    };
  },
};
</script>

pour ajouter un élément h1 avec le v-else directive qui lui est appliquée. Ensuite, nous voyons « au revoir » affiché si showMe est basculé sur false. Et nous voyons alterner « bonjour » et « au revoir » lorsque nous cliquons sur le bouton.

Nous pouvons également utiliser le v-else-if directive similaire à v-else pour ajouter plus de cas. Nous utilisons simplement v-else-if avec une valeur d’attribut définie pour la condition comme v-if.

Par exemple, nous écrivons :

<template>
  <button @click="count++">Increment</button>

  <h1 v-if="count % 3 === 0">evenly divisible by 3</h1>
  <h1 v-else-if="count % 3 === 1">has remainder 1</h1>
  <h1 v-else>has remainder 2</h1>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
};
</script>

pour que le bouton incrémente le count quand on clique dessus.

Et en dessous, nous indiquons « divisible également par 3 » lorsque count est également divisible par 3.

Si count a le reste 1 quand on le divise par 3, on utilise v-else-if pour montrer « a le reste 1 ». Sinon, on utilise v-else pour montrer « a le reste 2 ».

Nous pouvons également utiliser v-if sur le template element pour nous permettre de restituer conditionnellement un groupe d’éléments.

Par exemple, nous écrivons :

<template>
  <button @click="showMe = !showMe">Toggle</button>

  <template v-if="showMe">
    <h1>Hello</h1>
    <p>world</p>
  </template>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      showMe: false,
    };
  },
};
</script>

pour envelopper le template autour des éléments h1 et p.

Et nous appliquons le v-if directive sur la template élément au lieu du h1 et p éléments individuellement pour restituer les h1 et p à l’écran lorsque showMe est true.

Cela nous permet d’éliminer l’utilisation répétitive du v-if directive dans les mêmes conditions.

Utiliser v-if avec v-for

Le v-if La directive peut être utilisée avec le v-for directive pour rendre conditionnellement les listes.

Nous écrivons:

<template>
  <button @click="showMe = !showMe">Toggle</button>

  <template v-if="showMe">
    <h1 v-for="item of items" :key="item">{{ item }}</h1>
  </template>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      showMe: false,
      items: [1, 2, 3, 4, 5],
    };
  },
};
</script>

pour ajouter le v-if directive au template élément qui entoure la liste des h1 avec lesquels nous rendons v-for.

On peut aussi mettre le v-if et v-for directives sur le h1. Si nous le faisons, alors v-if est évalué en premier. Il est donc plus clair de séparer v-if du v-for directives pour clarifier la préséance.

Utilisation de la directive v-show

Le v-show la directive ne vient pas avec des analogues de v-else et v-else-if directives.

Donc tout ce que nous pouvons faire, c’est utiliser le v-show directive pour restituer un élément ou un composant de manière conditionnelle.

Par exemple, nous écrivons :

<template>
  <button @click="showMe = !showMe">Toggle</button>

  <h1 v-show="showMe">Hello</h1>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      showMe: false,
    };
  },
};
</script>

d’appliquer le v-show directive en définissant sa valeur sur showMe.

Ensuite, lorsque nous cliquons sur Toggle, nous voyons Hello activé et désactivé avec CSS.

Conclusion

Le v-if et v-show Les directives nous permettent de restituer conditionnellement des éléments à l’écran.

v-if nous permet de restituer conditionnellement les éléments à l’écran en les plaçant conditionnellement dans le DOM. Si l’expression que nous fixons v-if à est true, alors l’élément sera rendu. Sinon, il sera ignoré si la condition est false initialement ou supprimé du DOM si la condition devient false quand c’est initialement true.

Nous pouvons également utiliser le v-else-if et v-else directives avec v-if pour ajouter plus de cas pour les éléments rendus conditionnellement.

v-show restitue les éléments de manière conditionnelle avec CSS. Il affichera l’élément auquel la directive est appliquée si la valeur d’attribut que nous lui avons définie est true. Sinon, l’élément sera masqué par CSS.