Comment afficher les données cachées dans vue

Dans Vue, nous pouvons masquer ou afficher des données via v-if, v-show, des propriétés ou des méthodes calculées. Ci-dessous, examinons de plus près ces méthodes.

1. Affichage des contrôles v-if/v-else

<template>
  <div>
    <div v-if="isShow">这是要显示的数据</div>
    <div v-else>这是要隐藏的数据</div>
  </div>
</template>

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

Dans cet exemple, nous utilisons un type booléen data isShow pour contrôler s'il faut afficher ou masquer les données. Lorsque la valeur de isShow est vraie, les données à afficher seront affichées sinon elles seront masquées.

2. v-show contrôle l'affichage

<template>
  <div>
    <div v-show="isShow">这是要显示的数据</div>
  </div>
</template>

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

Différent de v-if/v-else, v-show affiche et masque les données en contrôlant la propriété d'affichage CSS. Lorsque la valeur de isShow est vraie, les données à afficher seront affichées et l'attribut d'affichage est la valeur définie pour l'élément, comme block par défaut, sinon, il sera masqué et l'attribut d'affichage est aucun ;

v-if/v-else et v-show ont des scénarios d'utilisation différents. v-if/v-else convient pour une utilisation lorsque des commutations fréquentes sont nécessaires, car il ne restituera le contenu correspondant que lorsque les conditions sont remplies. puis détruire et restituer lorsque les conditions ne sont pas remplies ; v-show convient lorsque le rendu initial doit contrôler l'affichage ou le masquage des données en fonction des conditions, car il contrôle simplement la propriété d'affichage CSS.

3. propriétés calculées

<template>
  <div>
    <div>{{ message }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      content: '这是要显示的数据'
    }
  },
  computed: {
    message() {
      if(this.isShow) {
        return this.content
      } else {
        return ''
      }
    }
  }
}
</script>

les propriétés calculées peuvent calculer dynamiquement certaines valeurs dans le modèle et renvoyer les résultats du calcul au modèle pour le rendu. Dans l'exemple ci-dessus, nous utilisons la méthode message dans la propriété calculée pour modifier dynamiquement les données à afficher en fonction des modifications de la valeur isShow.

4. méthode méthodes

<template>
  <div>
    <div>{{ getMessage() }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      content: '这是要显示的数据'
    }
  },
  methods: {
    getMessage() {
      if(this.isShow) {
        return this.content
      } else {
        return ''
      }
    }
  }
}
</script>

La méthode méthodes peut appeler dynamiquement une méthode dans le modèle et renvoyer la valeur de retour de la méthode au modèle pour le rendu. Dans l'exemple ci-dessus, nous avons utilisé la méthode getMessage dans la méthode méthodes pour modifier dynamiquement les données à afficher en fonction des modifications de la valeur isShow.

Quelle que soit la méthode utilisée, l'essentiel est de choisir la méthode appropriée pour masquer ou afficher les données en fonction du scénario spécifique.

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!