Guide pratique du rendu conditionnel Vue : explication détaillée des techniques d'utilisation de v-if, v-show, v-else, v-else-if

Guide pratique du rendu conditionnel Vue : explication détaillée des techniques d'utilisation de v-if, v-show, v-else, v-else-if

Vue.js est un JavaScript open source utilisé pour créer une interface interactive end interfaces Framework, qui fournit des instructions de rendu conditionnel flexibles pour afficher ou masquer des éléments spécifiques en fonction de différentes conditions. Dans Vue, v-if, v-show, v-else, v-else-if sont l'une de nos instructions de rendu conditionnel couramment utilisées. Cet article détaille l'utilisation de ces directives et fournit des exemples de code correspondants.

1. v-if et v-else

La directive v-if est utilisée pour restituer des éléments spécifiques en fonction de conditions. Si la condition est vraie, l'élément sera rendu, si la condition est fausse, l'élément ne sera pas rendu.

Exemple 1 : l & lt; test & gt;

& lt;

<h1 v-if="show">Hello, World!</h1>
<p v-else>Sorry, the element is hidden.</p>

& lt;/div & lt; a data () {

return {
  show: true
}

} }

Dans l'exemple ci-dessus, selon la valeur de la variable show, si show est vrai, le texte de l'élément "h1" sera affiché If. show est faux, le texte de l'élément "p" sera affiché. La directive

v-else est utilisée après v-if et peut être utilisée immédiatement dans la même balise pour exprimer la condition opposée à v-if.

Exemple 2 : l & lt; test & gt;
& lt; div & gt;

<h1 v-if="show">Hello, World!</h1>
<h3 v-else>Title</h3>

& lt;/div & lt; {a data () {

return {
  show: true
}

} }

Dans l'exemple ci-dessus, lorsque la valeur de show est vraie, le texte dans l'élément "h1" est affiché lorsque la valeur de show est fausse ; , le texte de l'élément "h3" est affiché.

v-show

La commande v-show est similaire à v-if et est également utilisée pour contrôler l'affichage et le masquage d'éléments dans des conditions spécifiques. La différence est que v-show utilise l'attribut display de CSS pour changer l'affichage et le masquage des éléments au lieu de supprimer ou d'ajouter directement des éléments.

Exemple 3 : l & lt; modèle & gt;
& lt; div & gt;

<h1 v-show="show">Hello, World!</h1>
<p v-show="!show">Sorry, the element is hidden.</p>

& lt;/div & lt; a data () {

return {
  show: true
}

} }

Dans l'exemple ci-dessus, lorsque la valeur de show est vraie, le texte dans l'élément "h1" est affiché lorsque la valeur de show est fausse, le texte dans l'élément "p" est affiché.

2. v-else-if

La directive v-else-if est similaire à la directive v-else, mais elle nous permet de définir plusieurs conditions consécutives. C'est très utile lors de l'utilisation des directives v-if et v-else.

Exemple 4 : l & lt; test & gt;

& lt;

<h1 v-if="score >= 90">A+</h1>
<h2 v-else-if="score >= 80">A</h2>
<h3 v-else-if="score >= 70">B</h3>
<h4 v-else-if="score >= 60">C</h4>
<h5 v-else>F</h5>

& lt;/div & lt; a data () {

return {
  score: 85
}

} }

Dans l'exemple ci-dessus, différents niveaux de texte sont affichés en fonction de la valeur du score variable. Selon la valeur du score, déterminez d'abord s'il est supérieur ou égal à 90. Si oui, affichez le texte dans l'élément "h1". Sinon, déterminez s'il est supérieur ou égal à 80. Si oui, affichez le. texte dans l'élément "h2", et ainsi de suite.

Pour résumer, v-if, v-show, v-else, v-else-if sont des instructions de rendu conditionnel couramment utilisées dans Vue.js. Choisissez la directive à utiliser pour obtenir l'effet souhaité en fonction de la situation réelle, et vous pouvez afficher ou masquer des éléments selon vos besoins. Lors de l'écriture du code, l'utilisation rationnelle de ces instructions peut optimiser la structure du code et améliorer la lisibilité et la maintenabilité du code. J'espère que cet article vous sera utile dans le développement de Vue.

(Remarque : l'exemple de code ci-dessus est uniquement à titre de référence, veuillez le modifier en fonction de la situation réelle lors de son utilisation)

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!