Le nirvana du rendu conditionnel Vue : explication détaillée des avantages et des inconvénients de v-if, v-show, v-else, v-else-if et analyse de cas

Le nirvana du rendu conditionnel Vue : Explication détaillée des avantages et des inconvénients de v-if, v-show, v-else, v-else-if et analyse de cas

Introduction :
Dans le développement de Vue, le rendu conditionnel est très important Une caractéristique importante. Vue fournit plusieurs instructions couramment utilisées pour implémenter le rendu conditionnel, notamment v-if, v-show, v-else et v-else-if. Ces instructions peuvent insérer ou supprimer dynamiquement des éléments DOM selon qu'une expression est vraie ou fausse. Cet article expliquera en détail l'utilisation, les avantages et les inconvénients de ces instructions, et les analysera plus en détail à travers des cas réels.

1. Instruction v-if
L'instruction v-if est l'instruction de rendu conditionnel la plus couramment utilisée dans Vue. Il détermine s'il faut restituer un élément DOM selon que l'expression est vraie ou fausse. Lorsque l'expression est vraie, v-if insérera l'élément DOM correspondant dans la page ; lorsque l'expression est fausse, v-if supprimera l'élément DOM correspondant de la page. Voici un exemple d'utilisation de la directive v-if :

<template>
  <div>
    <p v-if="show">显示文本</p>
  </div>
</template>

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

Dans cet exemple, lorsque show est vrai, l'élément DOM affichant le texte sera rendu ; lorsque show est faux, l'élément DOM sera supprimé ;

Avantages et inconvénients de la directive v-if :
Avantages :

1. La directive v-if convient aux éléments qui doivent fréquemment changer d'état d'affichage. Elle insérera et supprimera du DOM en fonction de la valeur de l'expression, améliorant ainsi. performance. .
2. La directive v-if peut être utilisée avec les directives v-else et v-else-if pour implémenter une logique de rendu conditionnel plus complexe.

Inconvénients : L'instruction

1. v-if détruira et reconstruira le DOM lors du changement, et les performances sont relativement faibles. Par conséquent, lorsque de nombreux éléments nécessitent un changement fréquent des états d'affichage, il n'est pas approprié d'utiliser l'instruction v-if. Vous pouvez envisager d'utiliser l'instruction v-show.

2. Commande v-show
La commande v-show est similaire à la commande v-if. Elle peut également changer l'état d'affichage des éléments en fonction de l'expression vraie ou fausse. La différence est que l'instruction v-show est implémentée en modifiant l'attribut display de l'élément, plutôt qu'en insérant et en supprimant directement des éléments DOM. Voici un exemple d'utilisation de la directive v-show :

<template>
  <div>
    <p v-show="show">显示文本</p>
  </div>
</template>

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

Dans cet exemple, lorsque show est vrai, display: block sera utilisé pour afficher l'élément DOM correspondant lorsque show est false, display: none sera utilisé pour ; masquer l'élément DOM correspondant.

Avantages et inconvénients de la commande v-show :
Avantages :

1. La commande v-show convient aux éléments qui doivent fréquemment changer d'état d'affichage. Puisqu'elle modifie uniquement l'attribut d'affichage de l'élément, les performances sont plus élevées. .
2. La commande v-show peut être utilisée conjointement avec la commande v-else pour implémenter une logique de rendu conditionnel simple.

Inconvénients :

1. L'instruction v-show ne prend pas en charge l'instruction v-else-if, donc l'utilisation de v-show sera lourde dans une logique de rendu conditionnel complexe.

3. Instructions v-else et v-else-if
Les instructions v-else et v-else-if sont deux instructions supplémentaires en rendu conditionnel. Ils peuvent être utilisés avec les directives v-if ou v-show pour implémenter une logique de rendu conditionnel plus complexe. Voici un exemple d'utilisation des instructions v-else et v-else-if :

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

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

Dans cet exemple, différents textes seront rendus en fonction de différentes valeurs de score. Lorsque le score est inférieur à 60, « Échec » sera rendu ; lorsque le score est supérieur ou égal à 60 et inférieur à 80, « Réussite » sera rendu dans les autres cas, « Excellent » sera rendu ;

Avantages et inconvénients des instructions v-else et v-else-if :
Avantages :

1. Les instructions v-else et v-else-if peuvent être utilisées en conjonction avec l'instruction v-if pour implémenter un rendu conditionnel plus complexe logique, rendant le code plus complexe. Clair et facile à lire.

Inconvénients :

1. Les instructions v-else et v-else-if ne peuvent être utilisées qu'avec l'instruction v-if et ne peuvent pas être utilisées avec l'instruction v-show.

Analyse de cas :
Ce qui suit est un cas spécifique montrant les scénarios d'utilisation, les avantages et les inconvénients des instructions v-if, v-show, v-else, v-else-if :

<template>
  <div>
    <button @click="toggleViewType">切换视图类型</button>
    <div v-if="viewType === 'list'">
      <ul>
        <li v-for="item in list">{{ item }}</li>
      </ul>
    </div>
    <div v-else-if="viewType === 'grid'">
      <div v-for="item in list" class="grid-item">{{ item }}</div>
    </div>
    <div v-else>
      暂无数据
    </div>
    <div v-show="showMoreInfo">
      更多信息
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['A', 'B', 'C'],
      viewType: 'list',
      showMoreInfo: true
    }
  },
  methods: {
    toggleViewType() {
      this.viewType = this.viewType === 'list' ? 'grid' : 'list';
    }
  }
}
</script>

Dans ce cas, en cliquant le bouton pour changer le type de vue afin d'afficher différentes méthodes d'affichage des données. Lorsque le type de vue est « liste », une liste ul sera rendue ; lorsque le type de vue est « grille », un ensemble de grilles div sera rendue ; lorsque le type de vue est vide, « Aucune donnée pour le moment » sera affiché. Dans le même temps, en contrôlant la valeur de showMoreInfo, vous pouvez décider d'afficher ou non « plus d'informations ».

À travers ce cas, nous pouvons voir la flexibilité, les avantages et les inconvénients de l'utilisation des instructions v-if, v-show, v-else-if et v-else. Dans le développement réel, nous pouvons choisir des instructions appropriées pour effectuer des opérations de rendu conditionnel en fonction de situations spécifiques.

Résumé :
Les instructions de rendu conditionnel de Vue v-if, v-show, v-else, v-else-if sont très couramment utilisées dans le développement de Vue. Grâce à des explications détaillées et des études de cas de ces instructions, nous comprenons comment les utiliser ainsi que leurs avantages et inconvénients. Dans le développement réel, nous devons choisir les instructions appropriées en fonction de besoins spécifiques pour obtenir le meilleur effet de rendu et la meilleure 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!