Rendu conditionnel Vue.js et V-if vs V-show

Si mes articles vous plaisent, vous pouvez m'offrir un café :)
Achetez-moi du café

Rendu conditionnel Vue.js

Les directives

v-if et v-show sont utilisées pour restituer conditionnellement un bloc dans Vue.js.

v-si

Dans vue.js, la directive v-if est utilisée pour rendre conditionnellement un bloc. Le bloc ne sera rendu que si l'expression de la directive renvoie une valeur véridique.

Exemple :

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

const show = ref(true)
</script>

<template>
  <button @click="show = !show">toggle</button>
    <h1 v-if="show">Vue.js</h1>
</template>

Vous pouvez utiliser la directive v-else pour indiquer un "bloc else" pour v-if. Si l'expression v-if directive ne renvoie pas vrai, le bloc v-else est rendu.

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

const show = ref(true)
</script>

<template>
  <button @click="show = !show">toggle</button>
    <h1 v-if="awesome"> v-if directive </h1>
    <h1 v-else> v-else directive </h1>
</template>

v-sinon-si

Le v-else-if, sert de "else if block" pour v-if. Il peut également être enchaîné plusieurs fois. Lorsque v-if et v-else-if ne sont pas évalués comme vrai, la directive v-else est déclenchée.

 <p v-if="currentState === 0">State 0: Message 1</p>
    <p v-else-if="currentState === 1">State 1: Message 2</p>
    <p v-else-if="currentState === 2">State 2: Message 3</p>
    <p v-else>State 3: Message 4</p>

v-show

Lorsque nous souhaitons afficher un élément de manière conditionnelle, nous pouvons utiliser la directive v-show comme autre option.

<h1 v-show="ok">Ok!</h1>

La différence est qu'un élément avec un v-show est toujours rendu et reste dans le DOM. v-show modifie la propriété d'affichage CSS pour afficher ou masquer l'élément. v-show ne fonctionne pas avec v-else

v-si contre v-show

v-if est un "vrai" rendu conditionnel car il garantit que les écouteurs d'événements et les composants enfants à l'intérieur du bloc conditionnel sont correctement détruits et recréés lors des bascules.

v-if : si la condition est fausse lors du rendu initial, il ne fera rien - le bloc conditionnel ne sera rendu que lorsque la condition deviendra vraie pour la première fois.

v-show est toujours rendu et reste dans le DOM. v-show modifie la propriété d'affichage CSS pour afficher ou masquer l'élément. v-show ne fonctionne pas avec v-else

v-if a des coûts de basculement plus élevés tandis que v-show a des coûts de rendu initiaux plus élevés. préférez v-show si vous devez basculer quelque chose très souvent, et préférez v-if s'il est peu probable que la condition change au moment de l'exécution.

Conclusion

Dans cet article, nous avons examiné les caractéristiques et les différences des directives v-if et v-show. Comprendre ces distinctions est essentiel pour optimiser les performances de rendu et gérer la visibilité des éléments dans vos applications Vue.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!