Vue.js est une bibliothèque facile à apprendre et accessible dans laquelle 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 sentir la liberté tout en développant des applications.

Dans toute application Web dynamique, le rendu conditionnel est une partie nécessaire. Vue.js fournit différentes manières de rendre conditionnel, et nous pouvons utiliser l'une des manières suivantes qui conviennent à notre objectif :

• v-show
• v-si
• v-autre

Dans cet article, nous allons essayer ces directives fournies par Vue.js pour le rendu conditionnel et mieux les comprendre.

v-show

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

Par example:

Ce paragraphe n'est pas caché

Ce paragraphe est caché

v-si

D'un autre côté, v-if ne cache pas l'élément, mais il ne rend rien tant que la valeur de l'expression ou de la variable transmise n'est pas vraie.

Par example:

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

Par example:

v-autre

Nous pouvons également utiliser la directive v-else avec l'instruction v-if afin d'effectuer un rendu conditionnel entre l'un des deux blocs. Mais, en gardant à l'esprit que le bloc v-else doit apparaître juste après le bloc v-if.

Par example:

Ce paragraphe sera rendu si 'isVar' devient vrai

Sinon, ce paragraphe sera rendu.

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

v-autre-si

Tout comme v-else, nous pouvons également utiliser la directive v-else-if avec la directive v-if.

Par example:

v-si vs. v-show

Le v-if et le v-show font la même tâche. Ils cachent tous les deux les éléments dans le DOM en fonction de la valeur vraie ou fausse de l'expression passée, mais avec une subtile différence entre cacher et ne pas rendre les éléments.

Si nous comparons le temps et le coût de traitement entre ces deux. Le v-if coûte plus cher pendant l'exécution ou le basculement, tandis que le v-show coûte plus cher au début du rendu. Donc, il serait sage d'utiliser v-show lorsque le basculement est le but. Sinon, v-if est préféré.

Emballer

Dans cet article, nous avons appris à rendre conditionnellement le DOM dans Vue.js en utilisant les directives v-if et v-else. Nous avons montré quelques exemples et appris la vraie différence entre la directive v-show et la directive v-if. Si cet article vous aide à avoir une meilleure compréhension et des concepts, continuez à visiter linuxhint.com pour un contenu aussi utile.