Vue.Rendu conditionnel JS
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:
C'est un titre
C'est un paragraphe
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
V-else-if
Tout comme V-Else, nous pouvons également utiliser la directive V-Else-IF avec la directive V-IF.
Par exemple:
Voiture
Livre
Animal
Aucun des absences
V-if vs. V-spectacle
Le v-if et le v-show font la même tâche. Ils cachent tous les deux les éléments du Dom en fonction de la vérité ou de la valeur de la fausseté de l'expression passée, mais avec une différence subtile de cachette et de non-rendu des é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 spectacle V coûte plus cher au début du rendu. Donc, il serait sage d'utiliser un spectacle en V lorsque la baisse est un objectif. Sinon, V-if est préféré.
Emballer
Dans cet article, nous avons appris à rendre conditionnellement le DOM dans Vue.js utilisant des directives V-if et V-else. Nous avons montré quelques exemples et appris sur la vraie différence entre V-show et V-If Directive. Si cet article vous aide à avoir une meilleure compréhension et concepts, continuez à visiter Linuxhint.com pour un contenu aussi utile.