L'arme secrète du rendu conditionnel Vue : explication détaillée de l'utilisation et comparaison des effets de v-if, v-show, v-else, v-else-if

L'arme secrète du rendu conditionnel Vue : explication détaillée de l'utilisation et comparaison des effets de v-if, v-show, v-else, v-else-if

Vue, en tant que framework frontal populaire, nous fournit une multitude d'outils et de commandes pour contrôler l'affichage et le masquage des vues. Dans Vue, le rendu conditionnel est une opération courante utilisée pour décider d'afficher ou de masquer des éléments en fonction de différentes conditions. Dans cet article, nous discuterons en détail des instructions de rendu conditionnel dans Vue : v-if, v-show, v-else, v-else-if, et comparerons leur utilisation et leurs effets. Parallèlement, nous fournirons des exemples de code spécifiques pour aider les lecteurs à mieux comprendre les scénarios d'application de ces instructions.

1. Directive v-if
   La directive v-if est l'une des instructions de rendu conditionnel les plus couramment utilisées dans Vue. Il décide s'il faut restituer un élément en fonction de conditions spécifiées. Lorsque la condition est vraie, l'élément sera restitué dans le DOM, sinon il sera supprimé du DOM. L'instruction v-if a une surcharge de commutation élevée et recréera ou détruira les éléments lorsque les conditions changent.

Voici un exemple d'utilisation de la directive v-if :

<template>
  <div>
    <p v-if="isShow">这是一个使用v-if指令的示例</p>
  </div>
</template>

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

Dans l'exemple ci-dessus, lorsque isShow est vrai, l'élément de paragraphe sera rendu dans le DOM lorsque isShow est faux, l'élément de paragraphe sera rendu à partir de le DOM Supprimer.

2. Commande v-show
   La commande v-show est similaire à la commande v-if, les deux sont utilisées pour le rendu conditionnel, mais il existe quelques différences entre les deux. La directive v-show contrôle l'affichage et le masquage des éléments en modifiant l'attribut d'affichage CSS de l'élément. Lorsque la condition est vraie, l'élément est affiché ; lorsque la condition est fausse, l'élément est masqué. Contrairement à v-if, l'instruction v-show a moins de temps de commutation. Elle modifie uniquement l'attribut d'affichage de l'élément et ne crée ni ne détruit réellement l'élément.

Voici un exemple d'utilisation de la directive v-show :

<template>
  <div>
    <p v-show="isShow">这是一个使用v-show指令的示例</p>
  </div>
</template>

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

Dans l'exemple ci-dessus, lorsque isShow est vrai, l'élément de paragraphe sera affiché ; lorsque isShow est faux, l'élément de paragraphe sera masqué.

3. Commande v-else
   La commande v-else est utilisée en conjonction avec la commande v-if ou v-show. Cela signifie que l'élément actuel est la « négation » de l'élément précédent. La directive v-else doit suivre la directive v-if ou v-show et ne peut avoir aucun paramètre ou expression.

Voici un exemple d'utilisation de la directive v-else :

<template>
  <div>
    <p v-if="isShow">这是一个使用v-if指令的示例</p>
    <p v-else>这是一个使用v-else指令的示例</p>
  </div>
</template>

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

Dans l'exemple ci-dessus, lorsque isShow est vrai, le premier élément de paragraphe sera rendu dans le DOM lorsque isShow est faux, les deuxièmes éléments de paragraphe le seront ; rendu dans le DOM.

4. Commande v-else-if
   La commande v-else-if est utilisée en conjonction avec la commande v-if ou v-show. Cela signifie que l'élément actuel est la « négation de l'élément précédent et l'affirmation d'une autre condition ». La directive v-else-if doit suivre la directive v-if ou v-show et peut avoir un paramètre ou une expression.

Ce qui suit est un exemple d'utilisation de la directive v-else-if :

<template>
  <div>
    <p v-if="type === 'A'">这是类型A的示例</p>
    <p v-else-if="type === 'B'">这是类型B的示例</p>
    <p v-else>这是其他类型的示例</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 'A',
    };
  },
};
</script>

Dans l'exemple ci-dessus, différents éléments de paragraphe seront rendus dans le DOM en fonction de différentes valeurs de type. Lorsque le type est « A », le premier élément de paragraphe sera rendu ; lorsque le type est « B », le deuxième élément de paragraphe sera rendu ; lorsque le type est d'autres valeurs, le troisième élément de paragraphe sera rendu.

Pour résumer, v-if, v-show, v-else, v-else-if sont des instructions de rendu conditionnel couramment utilisées dans Vue. Ils ont tous leurs propres avantages et scénarios applicables. Si vous devez fréquemment changer l'affichage et le masquage des éléments et que la surcharge de rendu est relativement faible, vous pouvez utiliser l'instruction v-show si vous devez créer ou détruire dynamiquement des éléments en fonction de différentes conditions, ou si la surcharge de commutation est importante ; , vous pouvez utiliser l'instruction v-if ; if Si vous devez restituer différents éléments en fonction de plusieurs conditions, vous pouvez utiliser la directive v-else-if si vous devez restituer certains éléments par défaut lorsque les conditions du v-if ; ou la directive v-show ne sont pas respectées, vous pouvez utiliser la directive v-else.

J'espère que grâce à l'introduction de cet article, les lecteurs pourront mieux comprendre et appliquer les instructions de rendu conditionnel dans Vue, et choisir les instructions appropriées pour contrôler l'affichage et le masquage des vues en fonction de besoins spécifiques.

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!