Comment utiliser v-if et v-else combinés pour obtenir un double rendu conditionnel dans Vue

Vue est un excellent framework front-end. Il est facile à apprendre, efficace, flexible et évolutif, il est donc largement apprécié par les développeurs front-end. Dans Vue, v-if et v-else sont deux instructions couramment utilisées. Elles peuvent nous aider à restituer différents contenus dans différentes conditions. Cet article explique comment utiliser v-if et v-else pour obtenir un double rendu conditionnel dans Vue.

1. v-if et v-else

Dans Vue, v-if est une instruction de jugement conditionnel. Il peut décider en fonction de conditions données. élément. Par exemple :

<div v-if="isShow">这是一个显示区域</div>

Quand isShow est vrai, ce div sera rendu ; lorsque isShow est faux, ce div sera supprimé du DOM.

v-else est une instruction supplémentaire à v-if, qui est utilisée pour restituer un autre élément lorsque la condition de v-if est fausse. Par exemple :

<div v-if="isShow">这是一个显示区域</div>
这是一个隐藏区域

Quand isShow est vrai, le premier div sera rendu et le deuxième div sera masqué ; lorsque isShow est faux, le premier div sera masqué et le deuxième div sera masqué ; rendu.

2. Utilisez v-if et v-else pour obtenir un double rendu conditionnel

Parfois, nous devons restituer un contenu différent en fonction de deux conditions, nous pouvons alors utiliser v- if et v-else combinés pour obtenir un double rendu conditionnel. Par exemple : nous devons afficher un contenu différent en fonction du sexe et de l'âge de l'utilisateur. Si l'utilisateur est un homme et a plus de 30 ans, nous affichons "Vous êtes entré dans la cinquantaine", sinon nous affichons "Vous êtes encore jeune".

Tout d'abord, nous devons définir deux variables, le sexe et l'âge, dans l'instance Vue. Ces deux variables représentent respectivement le sexe et l'âge de l'utilisateur.

data() {
  return {
    gender: 'male',
    age: 25
  }
}

Ensuite, vous pouvez écrire ceci dans le modèle :

<div v-if="gender === 'male' && age > 30">您已经步入中年</div>
<div v-else>您还年轻</div>

Si le sexe est masculin et que l'âge est supérieur à 30, le premier div sera rendu sinon le second ; sera rendu. Le div sera rendu.

3. Résumé

L'utilisation de v-if combinée avec v-else peut facilement obtenir un double rendu conditionnel. Dans le développement réel, nous pouvons raisonnablement utiliser les instructions Vue en fonction des besoins pour répondre à différents besoins. Dans le même temps, nous devons également prêter attention à l'utilisation des instructions et aux problèmes de performances, optimiser raisonnablement le code et améliorer les performances des pages et l'expérience utilisateur.

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!