Vue.JS est une bibliothèque facile à apprendre et accessible que nous pouvons commencer à créer des applications Web avec les connaissances de base du développement Web. En Vue.JS, les développeurs aiment coder et ressentir la liberté tout en développant des applications.

Dans toute application Web dynamique, le rendu conditionnel est une partie nécessaire. Vue.JS fournit des façons différentes pour le rendu conditionnel, et nous pouvons utiliser l'une des façons suivantes qui conviennent à notre objectif:

• V-spectacle
• V-if
• v-else

Dans cet article, nous allons essayer ces directives fournies par Vue.js pour le rendu conditionnel et les comprendre d'une meilleure manière.

V-spectacle

Le v-show ne cache l'élément en désactivant sa visibilité. Il cache l'élément si la valeur de l'expression ou de la variable passée n'est pas la vérité.

Par exemple:

Ce paragraphe n'est pas caché

Ce paragraphe est caché

V-if

D'un autre côté, V-if ne cache pas l'élément, mais il ne rend pas rien non plus que la valeur de l'expression ou de la variable passée devient vraie.

Par exemple:

C'est un paragraphe

Il existe une fonctionnalité supplémentaire dans la directive V-IF par rapport à la directive V-show. Nous pouvons également l'appliquer au bloc de modèle si nous ne voulons rien rendre entre ce bloc. Soit il y a un composant enfant dans cela, soit beaucoup d'autres éléments.

Par exemple:

v-else

Nous pouvons également utiliser la directive V-Else avec l'instruction V-IF afin de rendre conditionnellement entre l'un des deux blocs. Mais, en gardant à l'esprit que le bloc V-Else doit avoir à apparaître juste après le bloc V-IF.

Par exemple:

Ce paragraphe rendra si «isvar» devient vrai

Sinon, ce paragraphe sera rendu.

Nous pouvons également appliquer V-else sur le bloc de modèle.

C'est un titre

C'est un paragraphe