Techniques avancées pour le rendu conditionnel Vue : utilisez de manière flexible v-if, v-show, v-else, v-else-if pour créer une interface dynamique

Compétences avancées dans le rendu conditionnel Vue : utilisez de manière flexible v-if, v-show, v-else, v-else-if pour créer une interface dynamique

Dans Vue, le rendu conditionnel est une compétence spécifique très importante. les éléments peuvent être affichés ou masqués selon différentes conditions, améliorant ainsi l'expérience utilisateur et la flexibilité de l'interface. Vue fournit une variété d'instructions de rendu conditionnel, notamment v-if, v-show, v-else et v-else-if. Ce qui suit décrit l’utilisation de ces instructions et fournit des exemples de code spécifiques.

L'instruction v-if est l'instruction de rendu conditionnel la plus couramment utilisée. Elle détermine s'il faut restituer un élément spécifique en fonction de l'expression vraie ou fausse. Si la condition est vraie, l'élément correspondant est rendu ; si la condition est fausse, il n'est pas rendu. Voici un exemple de code simple :

<template>
  <div>
    <p v-if="isActive">当前状态为激活</p>
    <p v-else>当前状态为未激活</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true // 根据该状态决定是否渲染对应的元素
    }
  }
}
</script>

Dans le code ci-dessus, il est déterminé s'il faut restituer l'élément correspondant en fonction de la valeur de isActive. Si isActive est vrai, affiche l'élément p dont « l'état actuel est activé » ; si isActive est faux, affiche l'élément p dont « l'état actuel est inactif ».

La directive v-show peut également être utilisée pour afficher ou masquer des éléments en fonction de conditions, mais contrairement à v-if, v-show contrôle s'il faut l'afficher en définissant l'attribut d'affichage de l'élément. Si la condition est vraie, l'attribut d'affichage de l'élément est défini sur "block" et l'élément est affiché ; si la condition est fausse, l'attribut d'affichage de l'élément est défini sur "aucun" et l'élément est masqué. Voici un exemple de code simple :

<template>
  <div>
    <p v-show="isActive">当前状态为激活</p>
    <p v-show="!isActive">当前状态为未激活</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true // 根据该状态决定是否显示对应的元素
    }
  }
}
</script>

Dans le code ci-dessus, l'attribut d'affichage de l'élément est défini en fonction de la valeur de isActive, contrôlant ainsi l'affichage ou le masquage de l'élément. Si isActive est vrai, l'élément p avec « l'état actuel est activé » est affiché ; si isActive est faux, l'élément p avec « l'état actuel est inactif » est affiché.

Les instructions v-else et v-else-if sont des compléments à v-if et sont utilisées pour sélectionner différents contenus de rendu lorsque les conditions ne sont pas remplies. La directive v-else est utilisée pour exprimer « d'autres situations ». Elle doit suivre immédiatement la directive v-if ou v-else-if pour représenter toutes les autres situations où la condition précédente n'est pas remplie. L'instruction v-else-if est utilisée pour exprimer davantage de conditions, et différents contenus de rendu peuvent être sélectionnés en fonction de plusieurs conditions. Voici un exemple de code utilisant v-else et v-else-if :

<template>
  <div>
    <p v-if="score >= 90">成绩优秀</p>
    <p v-else-if="score >= 60">成绩合格</p>
    <p v-else>成绩不及格</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 80 // 根据成绩决定显示不同的内容
    }
  }
}
</script>

Dans le code ci-dessus, la performance de l'élève est jugée en fonction de la valeur du score, et différents éléments p sont affichés en fonction de différents scores. Si la note est supérieure ou égale à 90, l'élément p de « performance excellente » est affiché ; si la note est supérieure ou égale à 60, l'élément p de « note réussie » est affiché ; « note d'échec » s'affiche.

En utilisant de manière flexible des instructions de rendu conditionnel telles que v-if, v-show, v-else et v-else-if, nous pouvons obtenir des effets d'interface plus riches et plus dynamiques. Dans le développement réel, des instructions de rendu conditionnel appropriées peuvent être sélectionnées en fonction de besoins spécifiques, améliorant ainsi la lisibilité et la maintenabilité du programme. J'espère que les exemples de code et les explications de cet article seront utiles à tout le monde pour comprendre et utiliser les techniques de rendu conditionnel de Vue.

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!