Compétences avancées en rendu conditionnel Vue : maîtriser v-if, v-show, v-else, v-else-if pour implémenter des jugements logiques complexes

Vue est un framework frontal populaire qui fournit de nombreuses fonctionnalités flexibles, parmi lesquelles le rendu conditionnel est l'une des fonctions couramment utilisées en développement. Dans Vue, nous pouvons utiliser v-if, v-show, v-else, v-else-if et d'autres instructions pour implémenter un jugement logique complexe et un rendu conditionnel. Cet article explique comment utiliser ces directives et fournit quelques exemples de code spécifiques.

L'instruction v-if est l'instruction de rendu conditionnel la plus couramment utilisée. Vous pouvez ajouter l'attribut v-if à un élément DOM pour déterminer s'il faut restituer l'élément en fonction des conditions. La directive v-if ajoute ou supprime des éléments DOM selon qu'une expression est vraie ou fausse. Par exemple, nous pouvons afficher un contenu différent selon que l'utilisateur est connecté ou non :

<template>
  <div>
    <div v-if="isLoggedin">
      欢迎回来，{{ username }}！
    </div>
    <div v-else>
      请登录后查看内容。
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedin: false,
      username: 'John'
    }
  }
}
</script>

Dans le code ci-dessus, en fonction de la valeur de isLoggedin, nous pouvons décider d'afficher un message de bienvenue ou une invite de connexion. Lorsque isLoggedin est vrai, le message de bienvenue s'affiche, sinon l'invite de connexion s'affiche.

L'instruction v-show est similaire à l'instruction v-if. Elle peut également contrôler l'affichage et le masquage des éléments en fonction de conditions, mais elle ne supprime pas la structure DOM. Elle contrôle uniquement la visibilité de l'élément en définissant le. attribut d'affichage de l'élément. Lors de l'utilisation de la directive v-show, l'élément existe toujours dans le DOM et l'attribut d'affichage n'est défini qu'en fonction de conditions pour déterminer s'il doit être affiché. Voici un exemple :

<template>
  <div>
    <button @click="toggle">切换</button>
    <div v-show="isShow">
      这是一个隐藏的元素。
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow;
    }
  }
}
</script>

Dans le code ci-dessus, nous contrôlons l'affichage et le masquage des éléments en cliquant sur le bouton pour changer la valeur de isShow.

En plus de v-if et v-show, Vue fournit également des instructions v-else et v-else-if pour gérer les situations de rendu multi-conditions. v-else est utilisé conjointement avec v-if, ce qui signifie que si la condition v-if précédente n'est pas vraie, le contenu de v-else sera exécuté. v-else-if est utilisé pour basculer entre plusieurs conditions et son utilisation est similaire à v-else. Voici un exemple de rendu multi-conditions :

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

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

Dans le code ci-dessus, en fonction de la valeur du score, nous pouvons déterminer le niveau de performance de l'élève. Si le score est supérieur ou égal à 90, « Excellent » est affiché ; si le score est supérieur ou égal à 60, « Réussite » est affiché ; sinon, « Échec » est affiché ;

En maîtrisant les instructions de rendu conditionnel de v-if, v-show, v-else, v-else-if, nous pouvons répondre de manière flexible à divers besoins de jugement logique complexes dans le développement de Vue. Les exemples de code donnés ci-dessus peuvent vous aider à mieux comprendre comment utiliser ces instructions. J'espère que cet article sera utile à tout le monde pour apprendre le 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!