Compétences de rendu conditionnel Vue révélées : apprenez à utiliser v-if, v-show, v-else, v-else-if pour obtenir un contrôle flexible

Compétences de rendu conditionnel Vue révélées : Apprenez à utiliser v-if, v-show, v-else, v-else-if pour obtenir un contrôle flexible, vous avez besoin d'exemples de code spécifiques

Dans Vue, le rendu conditionnel est très tâche importante Technique importante, elle permet de contrôler l'affichage et le masquage de composants ou d'éléments en fonction de certaines conditions. Vue fournit une variété d'instructions de rendu conditionnel, notamment v-if, v-show, v-else, v-else-if, etc. Cet article approfondira les techniques d'utilisation de ces instructions et donnera des exemples de code spécifiques.

1. Instruction v-if
   L'instruction v-if peut déterminer s'il faut restituer un certain composant ou élément en fonction de la valeur de l'expression. Si la valeur de l'expression est vraie, le contenu correspondant est rendu ; si la valeur de l'expression est fausse, le contenu correspondant n'est pas rendu. Voici un exemple :

<template>
  <div>
    <h1 v-if="showHeading">显示标题</h1>
    <p v-else>隐藏标题</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHeading: true
    };
  }
};
</script>

Dans cet exemple, nous utilisons la directive v-if pour déterminer s'il faut afficher le titre en fonction de la valeur de showHeading. Si la valeur de showHeading est vraie, alors le titre sera rendu ; si la valeur de showHeading est fausse, alors le paragraphe avec le titre masqué sera rendu.

2. Commande v-show
   La commande v-show a une fonction similaire à la commande v-if. Elle peut également contrôler l'affichage et le masquage de composants ou d'éléments en fonction de la valeur d'une expression. Contrairement à v-if, v-show n'ajoute ni ne supprime d'éléments DOM en fonction de conditions, mais contrôle l'affichage et le masquage des éléments via des styles CSS. Voici un exemple :

<template>
  <div>
    <h1 v-show="showHeading">显示标题</h1>
    <p v-show="!showHeading">隐藏标题</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHeading: true
    };
  }
};
</script>

Dans cet exemple, nous utilisons la commande v-show pour contrôler l'affichage et le masquage du titre en fonction de la valeur de showHeading. Par rapport à v-if, la logique de v-show est plus simple car elle contrôle uniquement l'affichage et le masquage des éléments via des styles CSS.

3. Directive v-else
   La directive v-else doit être utilisée avec la directive v-if ou v-show pour exprimer la condition opposée à la directive v-if ou v-show. Voici un exemple :

<template>
  <div>
    <h1 v-if="showHeading">显示标题</h1>
    <p v-else>隐藏标题</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHeading: true
    };
  }
};
</script>

Dans cet exemple, si la valeur de showHeading est vraie, alors l'élément avec le titre affiché sera rendu si la valeur de showHeading est fausse, alors le paragraphe avec le titre masqué sera rendu ; .

4. Instruction v-else-if
   L'instruction v-else-if doit également être utilisée avec l'instruction v-if ou v-show pour exprimer le jugement de plusieurs conditions. Il peut être utilisé pour remplacer plusieurs instructions v-else if. Voici un exemple :

<template>
  <div>
    <h1 v-if="rating >= 9">优秀</h1>
    <h2 v-else-if="rating >= 6">良好</h2>
    <h3 v-else-if="rating >= 3">及格</h3>
    <h4 v-else>不及格</h4>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 8
    };
  }
};
</script>

Dans cet exemple, en fonction de la valeur de la note, nous utilisons les instructions v-if et v-else-if pour déterminer le niveau de note et restituer différents titres en conséquence. Si la valeur de note est supérieure ou égale à 9, un excellent titre sera rendu ; si la valeur de note est supérieure ou égale à 6, un bon titre sera rendu si la valeur de note est supérieure ou égale à 3 ; un titre de passage sera rendu ; si la valeur de notation est supérieure ou égale à 3, un titre de passage sera rendu ; si la valeur est inférieure à 3, le titre non qualifié sera rendu ;

Résumé : 
En apprenant et en utilisant des instructions de rendu conditionnel telles que v-if, v-show, v-else et v-else-if, nous pouvons contrôler de manière flexible l'affichage et le masquage des composants et des éléments en fonction des conditions. Selon les besoins spécifiques de l'entreprise, choisir les instructions appropriées pour implémenter le rendu conditionnel peut rendre notre code plus concis et plus lisible. J'espère que les exemples de code fournis dans cet article pourront vous aider à mieux 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!