Vue3 : instructions conditionnelles

Dans Vue 3, vous pouvez utiliser plusieurs instructions conditionnelles dans les templates pour contrôler le rendu des composants.

Les principales instructions conditionnelles sont :v-if、v-else-if、v-elseetv-show, voici leur utilisation et leurs différences :

  • v-if: l'élément, lorsque la condition estfalsene sera pas rendu dans le DOM, adapté aux situations où les conditions changent peu fréquemment.
  • v-show: l'élément est toujours rendu dans le DOM, adapté aux situations où les conditions changent fréquemment, avec de meilleures performances lors du basculement de la visibilité.
  • v-else-ifetv-else: utilisé pour gérer plusieurs branches conditionnelles, combiné avecv-ifutiliser.

Instruction conditionnelle

v-if

Rend conditionnellement des éléments en fonction de la véracité d'une expression. Si l'expression est true, l'élément est rendu ; si elle est false, il n'est pas rendu (l'élément ne sera pas créé dans le DOM).

Le test conditionnel utilise la directive v-if. L'élément est affiché uniquement lorsque l'expression de la directive renvoie true :

Directive v-if

Utilisez la directive v-if sur un élément :

<div id="app"> <p v-if="seen">Maintenant vous me voyez</p> </div> <script>const app = { data() { return { seen: true /* Passez à false, l'information ne s'affichera pas */ } } } Vue.createApp(app).mount('#app')</script>

Essayez-le »

Ici, la directive v-if décidera s'il faut insérer l'élément p en fonction de la valeur (true ou false) de l'expression seen.

Comme v-if est une directive, elle doit être ajoutée à un seul élément. S'il y a plusieurs éléments, vous pouvez les envelopper dans un élément <template> et utiliser v-if dessus. Le résultat final rendu n'inclura pas l'élément <template>.

Directive v-if

Utilisez la directive v-if sur un élément <template> :

<div id="app"> <template v-if="seen"> <h1>Site Web</h1> <p>Google</p> <p>Exemple</p> <p>Taobao</p> </template> </div> <script>const app = { data() { return { seen: true /* Passez à false, l'information ne s'affichera pas */ } } } Vue.createApp(app).mount('#app')</script>

Essayez-le »

v-else

Utilisé conjointement avec v-if, il affiche l'élément lorsque l'expression v-if précédente est fausse.

Vous pouvez utiliser la directive v-else pour ajouter un bloc "else" à v-if :

Directive v-else

Générez un nombre aléatoire, déterminez s'il est supérieur à 0.5, puis affichez les informations correspondantes :

<div id="app"> <div v-if="Math.random() > 0.5">Le nombre aléatoire est supérieur à 0.5</div> <div v-else>Le nombre aléatoire est inférieur ou égal à 0.5</div> </div> <script> Vue.createApp().mount('#app') </script>

Essayez-le »

v-else-if

Pour ajouter des vérifications conditionnelles supplémentaires entre v-if et v-else, vous pouvez utiliser plusieurs directives v-else-if successivement.

Directive v-else

Vérifiez la valeur de la variable type :

<div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Pas A/B/C </div> </div> <script> const app = { data() { return { type: "C" } } } Vue.createApp(app).mount('#app') </script>

Essayez-le »

v-else et v-else-if doivent suivre v-if ou v-else-if.

v-show

Affiche ou masque conditionnellement un élément selon la véracité d'une expression. Contrairement à v-if, v-show conserve toujours l'élément dans le DOM et contrôle uniquement la visibilité de l'élément via la propriété CSS display.

Nous pouvons également utiliser la directive v-show pour afficher des éléments en fonction de conditions :

Directive v-show

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

Essayez-le »

Si vous devez basculer fréquemment la visibilité d'un élément, la directive v-show est recommandée, car elle ne fait que basculer les styles CSS plutôt que de refaire le rendu de tout l'élément.

Autres extensions