Comment utiliser v-if et v-else-if pour obtenir plusieurs rendus conditionnels dans Vue

Vue est un framework JavaScript très populaire. Il peut non seulement être utilisé pour créer des applications monopage (SPA), mais peut également être utilisé pour créer des interfaces utilisateur complexes. Les instructions v-if et v-else-if dans Vue sont deux instructions importantes pour le rendu conditionnel des vues. Cet article explique comment utiliser ces deux instructions pour implémenter plusieurs rendus conditionnels.

1. Introduction à l'instruction v-if

L'instruction v-if est l'une des instructions les plus couramment utilisées dans Vue. Elle est utilisée pour effectuer un rendu conditionnel basé sur le. valeur d’un élément d’expression. Si l'expression est évaluée à true, l'élément est rendu, sinon l'élément n'est pas rendu.

Par exemple, le code suivant démontre l'utilisation de l'instruction v-if pour déterminer si un nombre est supérieur à 10. Si le nombre est supérieur à 10, l'étiquette "Nombre supérieur à 10" sera être affiché, sinon le label ne sera pas affiché : # 🎜🎜#

<template>
  <div>
    <p v-if="num > 10">数字大于10</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 20
    }
  }
}
</script>

La méthode data() renvoie ici un objet contenant un attribut num dont la valeur initiale est 20. Par conséquent, lors du rendu, le résultat de l'expression "num > 10" est jugé vrai, donc une étiquette sera rendue et le texte de l'étiquette est "Nombre supérieur à 10".

2. Introduction à l'instruction v-else-if

L'instruction v-else-if est également utilisée pour les éléments de rendu conditionnel. Il doit être utilisé comme « élément frère suivant » de la directive v-if pour déterminer s'il faut restituer l'élément en fonction de la valeur de l'expression. Si l'expression de la directive v-if précédente est évaluée comme fausse, alors la directive v-else-if vérifiera si son expression est vraie et restituera l'élément s'il est vrai.

Par exemple, le code suivant montre comment utiliser les instructions v-if et v-else-if pour implémenter plusieurs rendus conditionnels :

<template>
  <div>
    <p v-if="num > 30">数字大于30</p>
    <p v-else-if="num > 20">数字大于20</p>
    <p v-else-if="num > 10">数字大于10</p>
    <p v-else>数字小于等于10</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 15
    }
  }
}
</script>

Un nombre num est défini ici . La valeur est 15. Plusieurs instructions v-if et v-else-if sont utilisées pour décider d'afficher ou non l'étiquette en fonction de la valeur de num. Tout d'abord, déterminez si num est supérieur à 30. Si c'est le cas, affichez l'étiquette "Nombre supérieur à 30". Sinon, déterminez si num est supérieur à 20. Si tel est le cas, affichez l'étiquette "Nombre supérieur à 20", et ainsi de suite.

Dans cet exemple, puisque la valeur de num est 15, les deux premières conditions ne sont pas remplies, mais la troisième condition est remplie, donc le label "Nombre supérieur à 10" sera rendu.

3. Implémentation de plusieurs rendus conditionnels

Lorsque plusieurs conditions doivent être jugées, nous pouvons utiliser les instructions v-if et v-else-if en combinaison pour obtenir plusieurs Rendu conditionnel. Le code suivant montre comment utiliser les directives v-if et v-else-if pour restituer différents éléments en fonction de différentes conditions :

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

<script>
export default {
  data() {
    return {
      score: 75
    }
  }
}
</script>

Dans cet exemple, différents affichages sont affichés en fonction du texte de la partition. . Lorsque le score est supérieur ou égal à 90 points, « Excellent » est affiché ; lorsque le score est supérieur ou égal à 80 points, « Bon » est affiché lorsque le score est supérieur ou égal à 60 points ; " s'affiche ; sinon, " Échec " s'affiche.

4. Résumé

Les instructions v-if et v-else-if sont deux instructions très importantes dans Vue, qui peuvent être utilisées pour rendre des éléments de manière conditionnelle. Lorsqu'ils sont utilisés ensemble, vous pouvez restituer différents éléments en fonction de différentes conditions, comme dans l'exemple de code. Cette approche nous permet d'organiser les programmes de manière plus claire et facilite la maintenance.

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!