Scénarios d'utilisation des fonctions de rendu conditionnel dans la documentation Vue

Vue est actuellement l'un des frameworks JavaScript les plus populaires. Il fournit de nombreux outils et composants pratiques, permettant aux développeurs de développer efficacement des applications Web complexes. Parmi eux, le rendu conditionnel est une partie très importante de Vue. Il peut nous aider à restituer différents contenus dans différentes circonstances et à obtenir des effets dynamiques. Ci-dessous, nous présenterons en détail les scénarios d'utilisation du rendu conditionnel dans le document Vue.

1. Réaliser le rendu conditionnel via v-if et v-else

v-if et v-else sont les fonctions de rendu conditionnel les plus couramment utilisées dans le framework Vue. Elles peuvent restituer différents éléments HTML en fonction de conditions, par exemple :

<div v-if="isTrue">条件为真时显示的内容</div>
<div v-else>条件为假时显示的内容</div>

Dans le code ci-dessus, nous utilisons la directive v-if. Si isTrue est vrai, alors le premier élément div sera rendu, sinon le deuxième élément div sera rendu. C'est le moyen le plus simple de rendu conditionnel dans Vue.

En plus des exemples ci-dessus, v-if et v-else peuvent également être utilisés avec la directive v-for, qui peut générer dynamiquement les éléments HTML correspondants en fonction de la longueur du tableau, par exemple :

<ul>
  <li v-for="item in itemList" v-if="item.isShow">{{item.value}}</li>
  <li v-else>没有符合条件的数据</li>
</ul>

Dans le ci-dessus, s'il y a des éléments item qui remplissent les conditions dans le tableau itemList, l'élément li correspondant sera généré et la valeur qu'il contient sera affichée. Sinon, "Aucune donnée répondant aux conditions" ne sera affichée.

2. Réaliser un rendu conditionnel via v-show

L'instruction v-show peut également réaliser un rendu conditionnel, mais elle ne détruit pas et ne reconstruit pas les éléments DOM, mais contrôle l'attribut d'affichage du CSS. . Pour contrôler l'affichage et le masquage des éléments, par exemple :

<div v-show="isTrue">条件为真时显示的内容</div>

Dans le code ci-dessus, si isTrue est vrai, l'élément div sera affiché, sinon l'élément sera masqué.

Il convient de noter que l'instruction v-show ne peut pas coopérer avec l'instruction v-else pour effectuer le traitement logique correspondant comme l'instruction v-if.

3. Implémenter le rendu conditionnel via des attributs calculés

Dans certains cas particuliers, nous pouvons avoir besoin d'afficher et de masquer dynamiquement des éléments HTML en fonction de plusieurs conditions. Dans ce cas, nous pouvons utiliser des attributs calculés pour implémenter le rendu conditionnel, par exemple :

.

<div v-show="isShow">元素1</div>
<div v-show="isShow1">元素2</div>
<div v-show="isShow && isShow1">元素3</div>

<script>
export default {
  data() {
    return {
      type: '',
      status: ''
    }
  },
  computed: {
    isShow() {
      return this.type === 'A'
    },
    isShow1() {
      return this.status === 'B'
    }
  }
}
</script>

Dans l'exemple ci-dessus, nous utilisons l'attribut calculé pour calculer dynamiquement les propriétés isShow et isShow1, puis affichons et masquons dynamiquement différents éléments HTML en fonction des valeurs de ces deux propriétés.

4. Réaliser une liaison de style conditionnelle via v-bind:class

En plus de contrôler l'affichage et le masquage des éléments, nous pouvons également utiliser la directive v-bind:class pour lier dynamiquement des classes de style en fonction de conditions, par exemple :

<div v-bind:class="{ active: isActive, 'text-secondary': !isActive }">条件渲染的样式</div>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons la directive v-bind:class pour lier dynamiquement la classe de style. Si isActive est vrai, le style contiendra la classe "active", sinon le style contiendra le "text-secondary". classe .

En plus de la directive v-bind:class, le framework Vue fournit également de nombreuses instructions pratiques de liaison de style, telles que v-bind:style, v-bind:background-color, etc., qui peuvent lier dynamiquement différents styles en fonction à différentes conditions.

Résumé : La fonction de rendu conditionnel de Vue est une partie très pratique du framework Vue, qui peut aider les développeurs à obtenir un affichage dynamique des éléments HTML et des effets de liaison de style. Les exemples ci-dessus ne sont que quelques scénarios d'utilisation simples. Dans le développement réel, il existe de nombreuses autres situations complexes qui doivent être résolues à l'aide des fonctions de rendu conditionnel. Les développeurs doivent choisir la méthode de rendu conditionnel la plus appropriée en fonction des besoins réels.

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!