vue masquer l'affichage des données

Dans le développement de Vue, nous rencontrons souvent le besoin de masquer ou d'afficher des données. Par exemple, nous pouvons être amenés à masquer certaines données sensibles dans certaines circonstances ou à afficher certaines données lorsque les conditions sont remplies. Vue propose diverses façons de masquer et d'afficher des données. Ensuite, nous présenterons ces méthodes.

1. Rendu conditionnel

Les instructions de rendu conditionnel de Vue peuvent ajouter des instructions v-if ou v-show sur les éléments DOM pour contrôler si les éléments DOM sont affichés en fonction de la condition vraie ou fausse. L'utilisation de ces deux instructions est différente : l'instruction

v-if supprime ou rajoute des éléments du DOM au DOM, elle peut donc être utilisée pour gérer des opérations plus intensives ou des situations impliquant un grand nombre de sous-composants.

L'instruction v-show masque et affiche les éléments via l'attribut display de CSS. Étant donné que l'élément lui-même existe toujours dans le DOM, la directive v-show gère plus efficacement les opérations légères et les opérations ordinaires.

Voici un exemple simple :

<template>
  <div>
    <p v-if="showText">这里是需要隐藏的文本。</p>
    <p v-show="showText">这里是需要显示的文本。</p>
  </div>
</template>

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

Dans cet exemple, nous déclarons un attribut de données appelé showText. Selon la valeur de showText, nous pouvons contrôler l'affichage et le masquage du texte via les instructions v-if et v-show.

2. attribut calculé

Si nous devons contrôler dynamiquement l'affichage et le masquage de certains éléments en fonction de l'état des attributs de données, l'attribut calculé est un bon choix. Les propriétés calculées sont des propriétés calculées dans Vue, elles ne sont recalculées que lorsque les propriétés de données dont elles dépendent changent. Nous pouvons utiliser l'attribut calculé pour calculer la logique qui contrôle l'affichage et le masquage des éléments.

Ce qui suit est un exemple d'utilisation de l'attribut calculé :

<template>
  <div>
    <p v-if="showText">这里是需要隐藏的文本。</p>
    <p v-show="showTextComputed">这里是需要显示的文本。</p>
    <button @click="toggleShowText">切换显示状态</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showText: false,
    }
  },
  computed: {
    showTextComputed() {
      // 根据数据状态来计算是否显示元素
      return this.showText ? true : false
    },
  },
  methods: {
    toggleShowText() {
      // 切换showText的数据状态
      this.showText = !this.showText
    },
  },
}
</script>

Dans cet exemple, nous déclarons un attribut calculé showTextComputed pour calculer l'état affiché et caché de l'élément. En changeant la valeur de showText à l'aide de la méthode toggleShowText, nous pouvons contrôler dynamiquement les résultats de calcul de l'attribut calculé. Le mécanisme de slot de

3. slot

Vue permet aux composants enfants d'insérer du contenu sur les composants parents. En utilisant des emplacements, vous pouvez fournir du contenu et des styles HTML personnalisés pour les composants enfants du composant parent. Nous pouvons masquer et afficher des données grâce au mécanisme de fente.

Ce qui suit est un exemple d'utilisation de slot pour masquer et afficher du contenu :

<template>
  <div>
    <content v-if="showText">
      <p>这里是需要隐藏的文本。</p>
    </content>
    <content v-show="showText">
      <p>这里是需要显示的文本。</p>
    </content>
    <button @click="toggleShowText">切换显示状态</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showText: false,
    }
  },
  methods: {
    toggleShowText() {
      this.showText = !this.showText
    },
  },
}
</script>

Dans cet exemple, nous utilisons la balise content comme slot et affichons le contenu correspondant en fonction de l'état des données. Grâce à la méthode toggleShowText, nous pouvons changer dynamiquement l'état des données pour contrôler l'affichage et le masquage du contenu.

Résumé

Voici trois façons différentes de masquer et d'afficher des données. Le rendu conditionnel est la méthode de traitement la plus courante, qui permet de restituer et de supprimer des éléments DOM en fonction de l'état des données. L'attribut calculé convient aux situations où l'état des données doit être calculé. Le mécanisme de slot convient aux situations dans lesquelles vous devez fournir des styles personnalisés et du contenu HTML pour les composants enfants. Dans le développement de Vue, nous pouvons choisir de manière flexible une méthode qui nous convient en fonction des différents besoins pour masquer et afficher les données.

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!