Comment utiliser v-if et v-else pour restituer du contenu conditionnel dans Vue

Vue est un framework de développement front-end populaire qui fournit une variété de directives pour nous aider à gérer le contenu dynamique de nos applications. Deux des instructions, v-if et v-else, sont utilisées pour restituer le contenu en fonction de conditions.

La directive v-if nous permet d'intégrer une expression booléenne dans le modèle, et le contenu correspondant ne sera rendu que lorsque l'expression est vraie. Lorsque l'expression est fausse, rien n'est rendu.

Par exemple, dans le modèle Vue, nous pouvons utiliser la directive v-if de la manière suivante :

<div v-if="isMaster">{{ message }}</div>

Dans le code ci-dessus, nous contrôlons le contenu du texte via le Afficher la variable isMaster. Si isMaster est vrai, la valeur du message sera rendue sur la page. Si isMaster est faux, le div ne sera pas rendu.

En plus de la directive v-if, Vue fournit également une directive v-else. v-else ne peut suivre que la directive v-if et est utilisé pour spécifier le contenu qui doit être rendu lorsque l'expression de v-if est fausse.

Par exemple, dans un modèle Vue, nous pouvons utiliser à la fois les directives v-if et v-else de la manière suivante :

<div v-if="isMaster">{{ message }}</div>
{{ errMsg }}

Dans le code ci-dessus, si isMaster est true , le contenu du texte du premier div sera rendu. Si isMaster est faux, le contenu du texte du deuxième div sera affiché et le premier div ne sera pas affiché.

De plus, Vue fournit également une directive v-else-if pour basculer le rendu du contenu entre plusieurs conditions.

Par exemple, dans un modèle Vue, nous pouvons utiliser les directives v-if, v-else-if et v-else ensemble de la manière suivante :

<div v-if="isMaster">{{ message }}</div>
{{ teacherMsg }}
{{ errMsg }}

Dans le au-dessus du code, si isMaster est vrai, le contenu du texte dans le premier div sera rendu. Si isMaster est faux et isTeacher est vrai, le contenu du texte dans le deuxième div sera affiché. Si isMaster et isTeacher sont faux, le contenu du texte dans le troisième div sera affiché.

En résumé, l'utilisation des directives v-if, v-else et v-else-if dans Vue peut nous aider à restituer un contenu spécifique sur la page en fonction de conditions. L'utilisation de ces directives améliore la capacité de s'adapter à divers environnements et d'ajouter du code conditionnel si nécessaire. Assurez-vous également de tester lorsque vous utilisez ces directives pour vous assurer que le contenu conditionnel rendu s'affiche correctement.

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!