Artefact de rendu conditionnel Vue : analyse approfondie de l'utilisation de v-if, v-show, v-else, v-else-if

Vue est un framework front-end très populaire qui fournit des fonctionnalités riches pour nous aider à créer des applications Web hautement interactives. Parmi eux, le rendu conditionnel est une fonctionnalité importante de Vue, grâce à laquelle nous pouvons afficher ou masquer dynamiquement un élément en fonction de conditions. Dans Vue, nous pouvons utiliser v-if, v-show, v-else, v-else-if et d'autres instructions pour implémenter le rendu conditionnel. Ci-dessous, nous analyserons en profondeur l'utilisation de ces instructions et fournirons des exemples de code spécifiques.

Tout d’abord, introduisons l’instruction v-if. La directive v-if est utilisée pour restituer conditionnellement des éléments en fonction de la vérité ou de la fausseté d'une expression. Lorsque l'expression est vraie, l'élément est rendu sur la page ; lorsque l'expression est fausse, l'élément est supprimé de la page. Voici un exemple :

<div v-if="show">
  <p>这是一个条件渲染的示例</p>
</div>

Dans le code ci-dessus, nous utilisons la directive v-if pour contrôler l'affichage et le masquage des éléments div en fonction de la valeur de la variable show. Si show est vrai, l'élément div sera affiché sur la page ; si show est faux, l'élément div sera supprimé.

Ensuite, nous introduisons la commande v-show. La directive v-show est également utilisée pour restituer conditionnellement des éléments selon qu'une expression est vraie ou fausse. Cependant, contrairement à v-if, v-show affiche et masque uniquement les éléments en modifiant les propriétés CSS de l'élément. existe toujours sur la page. Voici un exemple :

<div v-show="show">
  <p>这是一个条件渲染的示例</p>
</div>

Dans le code ci-dessus, nous utilisons également la variable show pour contrôler l'affichage et le masquage des éléments div. Si show est vrai, l'attribut display de l'élément div est défini sur block et l'élément est affiché sur la page ; si show est false, l'attribut display de l'élément div est défini sur none et l'élément est masqué sur la page.

En plus de v-if et v-show, Vue fournit également des instructions v-else et v-else-if pour implémenter le rendu multi-conditions. La directive v-else est utilisée pour restituer un élément lorsque la condition de la directive v-if n'est pas vraie et la directive v-else-if est utilisée pour restituer un élément lorsque la condition de la directive v-if n'est pas vraie et. une certaine condition est remplie. Voici un exemple :

<div v-if="score > 90">
  <p>优秀</p>
</div>
<div v-else-if="score > 80">
  <p>良好</p>
</div>
<div v-else>
  <p>不及格</p>
</div>

Dans le code ci-dessus, nous déterminons les performances de l'élève en fonction de la valeur de la variable de score et rendons conditionnellement un texte différent. Si le score est supérieur à 90, le rendu est « excellent » ; si le score est supérieur à 80, le rendu est « bon » sinon, le rendu est « raté ».

Pour résumer, v-if, v-show, v-else, v-else-if sont les quatre instructions importantes pour le rendu conditionnel dans Vue. En les utilisant de manière flexible, nous pouvons afficher ou masquer dynamiquement des éléments en fonction des conditions, rendant ainsi les applications Web plus riches et plus intéressantes. Dans le développement réel, nous pouvons sélectionner les instructions appropriées pour implémenter le rendu conditionnel en fonction des besoins et les appliquer en combinaison avec des données et une logique spécifiques. J'espère que cet article pourra aider tout le monde à se familiariser avec et à utiliser le rendu conditionnel.

Ce qui précède est le contenu de cet article, j'espère qu'il vous sera utile !

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!