Comment utiliser v-show pour contrôler l'affichage et le masquage des éléments dans Vue

Vue est un framework JavaScript populaire largement utilisé pour créer des applications Web dynamiques et réactives d'une seule page. Parmi elles, l'instruction v-show est une instruction couramment utilisée dans Vue, qui peut être utilisée pour contrôler l'affichage et le masquage d'éléments. Cet article explique comment utiliser la directive v-show dans Vue.

1. Utilisation de la commande
L'utilisation de la commande v-show est très simple. Sa syntaxe est la suivante :

v-show="expression"

où expression est une expression JavaScript Si le résultat de l'expression est vrai, l'élément sera affiché si le résultat de l'expression est faux, alors Le. l’élément sera masqué.

2. Exemple de description
Regardons un exemple comportant un bouton et un paragraphe. Lorsque nous cliquons sur le bouton, l'état d'affichage du paragraphe changera :

<template>
  <div>
    <button @click="toggleShow">点击切换</button>
    <p v-show="show">这里是段落文本</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
  },
};
</script>

Dans le code ci-dessus, nous avons défini la variable show via l'attribut data et l'avons initialisée à true. Dans le modèle, nous utilisons la directive v-show pour lier le paragraphe à la variable show. Dans la méthode toggleShow, nous basculons l'état d'affichage du paragraphe en inversant simplement la variable show.

Comme vous pouvez le constater, il est très pratique d'utiliser v-show pour contrôler l'affichage et le masquage des éléments. Il vous suffit de lier l'instruction à une variable de type booléen. Contrairement à la directive v-if, v-show ne détruit ni ne recrée les éléments lorsque l'élément est commuté, il fonctionne donc mieux que v-if.

3. Remarques sur les instructions
Lors de l'utilisation de v-show, vous devez faire attention aux problèmes suivants :

1. v-show ne peut être lié qu'à des éléments avec des attributs d'affichage, tels que div, p, span, etc. Si vous souhaitez lier la directive v-show à un composant personnalisé, assurez-vous que le composant possède l'attribut display.
2. Si vous devez basculer entre plusieurs éléments, il est recommandé d'utiliser l'instruction v-if. Étant donné que v-show ne détruit ni ne recrée d'éléments, si vous devez fréquemment changer l'état d'affichage des éléments, cela aura un certain impact sur les performances.
3. Si vous souhaitez masquer l'élément sans prendre de place sur la page, pensez à utiliser la directive v-if.

4. Résumé
L'instruction v-show est une instruction courante utilisée dans Vue pour contrôler l'affichage et le masquage des éléments. Par rapport à l'instruction v-if, v-show est plus adapté aux scénarios dans lesquels l'état d'affichage des éléments doit être fréquemment changé. Lorsque vous utilisez v-show, vous devez noter que l'élément lié doit avoir l'attribut display, et si vous devez basculer entre plusieurs éléments, vous devriez envisager d'utiliser la directive v-if.

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!