Comment masquer et afficher dynamiquement les composants Uniapp

Avec le développement continu des applications mobiles, les développeurs doivent être capables de masquer et d'afficher différents composants de manière dynamique lors de la création d'interfaces utilisateur riches. Dans uniapp, nous pouvons utiliser la liaison de propriétés dynamiques et le rendu conditionnel des composants vue pour atteindre cet objectif. Dans cet article, nous examinerons les différentes manières d’obtenir cette fonctionnalité ainsi que leurs avantages et inconvénients.

Tout d’abord, regardons la méthode la plus simple et la plus directe : utiliser la commande v-show. La fonction de la directive v-show est de déterminer si l'élément est affiché en fonction de la valeur de l'expression. Lorsque l’expression est évaluée à vrai, l’élément sera affiché ; sinon, l’élément sera masqué.

Dans uniapp, utiliser la directive v-show est très simple. Il vous suffit de l'ajouter au composant qui doit être masqué ou affiché et de définir sa valeur sur une variable booléenne. Voici un exemple d'utilisation de la directive v-show pour masquer et afficher un bouton :

<template>
  <button v-show="showBtn">点击我</button>
</template>

<script>
export default {
  data() {
    return {
      showBtn: true  // 默认显示按钮
    }
  },
  methods: {
    hideBtn() {
      this.showBtn = false;  // 隐藏按钮
    },
    showBtn() {
      this.showBtn = true;   // 显示按钮
    }
  }
}
</script>

Dans l'exemple ci-dessus, nous avons utilisé la directive v-show sur le bouton et lié sa valeur à un attribut de données showBtn. Lorsque la valeur de showBtn est vraie, le bouton sera affiché ; lorsque la valeur de showBtn est fausse, le bouton sera masqué. En appelant les méthodes hideBtn et showBtn, nous pouvons modifier dynamiquement la valeur de showBtn pour masquer et afficher le bouton.

L'avantage de la directive v-show est qu'elle ne supprime pas réellement l'élément du DOM, mais conserve plutôt l'élément dans le document et le masque simplement via CSS. Cela signifie que lorsque nous aurons besoin de réafficher l'élément, l'état de l'élément sera préservé. Cependant, l'inconvénient de la directive v-show est qu'elle nécessite une manipulation du DOM à chaque fois qu'un élément est mis à jour, ce qui peut affecter les performances.

La deuxième façon de masquer et d'afficher des éléments consiste à utiliser la directive v-if. Contrairement à la directive v-show, la directive v-if détermine si un élément doit exister dans le DOM en fonction de la valeur d'une expression. Lorsque l'expression est évaluée à true, l'élément existera dans le DOM ; sinon, l'élément sera supprimé du DOM.

Dans uniapp, utiliser l'instruction v-if est également très simple. Ajoutez-le simplement au composant qui doit être masqué ou affiché et définissez sa valeur sur une variable booléenne. Voici un exemple d'utilisation de la directive v-if pour masquer et afficher un bouton :

<template>
  <button v-if="showBtn" @click="hideBtn">点击我</button>
</template>

<script>
export default {
  data() {
    return {
      showBtn: true  // 默认显示按钮
    }
  },
  methods: {
    hideBtn() {
      this.showBtn = false;  // 隐藏按钮
    },
    showBtn() {
      this.showBtn = true;   // 显示按钮
    }
  }
}
</script>

Dans l'exemple ci-dessus, nous avons utilisé la directive v-if sur le bouton et lié sa valeur à un attribut de données showBtn. Lorsque la valeur de showBtn est vraie, le bouton existera dans le DOM ; lorsque la valeur de showBtn est fausse, le bouton sera supprimé du DOM. En appelant les méthodes hideBtn et showBtn, nous pouvons modifier dynamiquement la valeur de showBtn pour masquer et afficher le bouton.

L'avantage de la directive v-if est qu'elle effectue uniquement les opérations DOM nécessaires à chaque fois qu'un élément est mis à jour, ce qui signifie qu'elle a moins d'impact sur les performances. Cependant, l'inconvénient de la directive v-if est que lorsqu'un élément est supprimé du DOM, l'état de cet élément sera également supprimé. Lorsque nous devons réafficher l'élément, nous devons recréer l'élément et son état, ce qui est nécessaire. peut affecter les performances.

Enfin, regardons la troisième méthode pour masquer et afficher des éléments : utiliser l'instruction v-bind pour changer dynamiquement la classe de l'élément. En changeant la classe d'un élément, nous pouvons changer le style de l'élément, masquant et affichant ainsi l'élément.

Dans uniapp, nous pouvons lier une classe dynamique à un composant en utilisant la directive v-bind. Lorsque la valeur de l'expression est vraie, le composant ajoutera cette classe ; sinon, le composant supprimera cette classe. Voici un exemple d'utilisation de la directive v-bind pour masquer et afficher un bouton :

<template>
  <button :class="{ &#39;hidden&#39;: !showBtn }" @click="hideBtn">点击我</button>
</template>

<style>
.hidden {
  display: none;
}
</style>

<script>
export default {
  data() {
    return {
      showBtn: true  // 默认显示按钮
    }
  },
  methods: {
    hideBtn() {
      this.showBtn = false;  // 隐藏按钮
    },
    showBtn() {
      this.showBtn = true;   // 显示按钮
    }
  }
}
</script>

Dans l'exemple ci-dessus, nous avons utilisé la directive v-bind pour lier une classe dynamique masquée au bouton. Lorsque la valeur de showBtn est fausse, cette classe sera ajoutée au bouton, masquant ainsi le bouton ; lorsque la valeur de showBtn est vraie, cette classe sera supprimée, affichant ainsi le bouton. En même temps, nous devons définir la classe .hidden dans la feuille de style et définir le bouton sur display : none pour masquer et afficher les éléments.

Différent de l'instruction v-show, l'avantage d'utiliser l'instruction v-bind est que nous pouvons obtenir plus de changements de style en modifiant la classe de l'élément, et pas seulement en changeant l'état d'affichage de l'élément. L'inconvénient est qu'il nécessite l'utilisation de CSS pour styliser les éléments, ce qui peut avoir un impact sur les performances.

Pour résumer, il existe de nombreuses façons de masquer et d'afficher des éléments. Dans uniapp, nous pouvons choisir l'instruction v-show, l'instruction v-if ou utiliser l'instruction v-bind pour changer dynamiquement la classe de l'élément. Chaque méthode a ses propres avantages et inconvénients, et nous devons choisir la méthode la plus appropriée en fonction des besoins et des scénarios 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!