vue état caché

À mesure que le développement front-end devient de plus en plus mature et complexe, il y a de plus en plus de problèmes auxquels nous, les développeurs, devons nous adapter et résoudre. Parmi eux, l’optimisation de la logique d’affichage des pages est un aspect auquel nous devons prêter attention. Afin d'optimiser l'efficacité du rendu des pages et l'expérience interactive, Vue propose une fonction très pratique : l'état caché.

Qu'est-ce que l'état caché ?

Tout d’abord, comprenons brièvement quel est l’état caché de Vue. Il masque ou affiche en fait le contenu d'un composant en contrôlant l'attribut d'affichage de l'élément Dom. Par exemple, si nous devons masquer une certaine zone sous certaines conditions, nous pouvons écrire comme ceci :

<template>
  <div>
    <div class="info" v-show="isShow">
      <!-- 这里是一些信息内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true // 控制显示或隐藏
    }
  }
}
</script>

Dans le code ci-dessus, nous avons utilisé l'instruction Vue "v-show" et l'avons liée à une variable isShow. Lorsque la valeur de isShow est vraie, le contenu de la zone sera affiché ; lorsque la valeur de isShow est fausse, le contenu de la zone sera masqué.

La différence entre

et v-if

Nous avons mentionné plus tôt que l'élément Dom dans v-show est masqué ou affiché en modifiant l'attribut display. Alors, quelle est la différence entre v-if et v-show ?

Tout d'abord, v-if sera exécuté lorsque le composant doit être rendu, tandis que v-show modifie simplement l'attribut d'affichage et sera exécuté indépendamment du fait que le composant doit être rendu ou non. Par conséquent, lorsque les composants doivent fréquemment changer d’affichage, il est préférable d’utiliser v-show pour optimiser les performances.

Deuxièmement, les expressions de v-if et v-show sont écrites légèrement différemment. v-if est suivi d'une expression, et le composant sera rendu uniquement lorsque l'expression est vraie ; v-show est suivi d'une valeur booléenne. Lorsqu'il est vrai, le composant est affiché, et lorsqu'il est faux, le composant. est caché.

De plus, v-if supprime complètement le composant de l'arborescence Dom et v-show définit l'attribut d'affichage du composant sur aucun. Par conséquent, v-if peut entraîner des problèmes de performances lors du redessinage de Dom lors de changements fréquents.

Il convient de noter qu'il n'est pas recommandé d'utiliser v-if et v-show en même temps, mais l'un d'eux doit être sélectionné en fonction des besoins réels.

Scénarios d'application

L'état caché de Vue peut être appliqué à de nombreux scénarios. Voici quelques scénarios d'application courants.

Contrôle de l'état de connexion

Lorsque l'utilisateur n'est pas connecté, nous devons masquer certains contenus que seuls les utilisateurs connectés peuvent voir. À l'heure actuelle, vous pouvez utiliser l'état caché de Vue pour simplement implémenter :

2. <template>
     <div>
       <div v-show="isLogin">
         <!-- 需要登录后才能查看的内容 -->
       </div>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         isLogin: false // 默认未登录
       }
     },
     created() {
       // 模拟登录，修改isLogin值
       this.isLogin = true;
     }
   }
   </script>

Contrôle d'affichage des données de table

Lorsque les données de la table sont volumineuses, nous ne voulons pas afficher toutes les données en même temps, mais devons les afficher dans pages. À l'heure actuelle, vous pouvez utiliser l'état caché de Vue pour implémenter l'affichage de pagination :

<template>
  <div>
    <div v-for="(item, index) in data" :key="index" v-show="(index+1) > (currentPage-1)*pageSize && (index+1) <= currentPage*pageSize">
      <!-- 表格展示内容 -->
    </div>
    <div>
      <!-- 分页组件 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10 // 每页显示数量
    }
  },
  created() {
    // 获取表格数据，赋值给data
  }
}
</script>

Lorsqu'il y a beaucoup de données de table, il suffit d'afficher les données sur la page actuelle et de masquer les autres données.

Résumé

🎜Dans le développement front-end, l'optimisation de l'efficacité du rendu des pages et de l'expérience interactive est un aspect auquel nous devons prêter attention. L'état caché de Vue fournit une méthode simple et facile à utiliser qui peut rapidement afficher et masquer le contenu de la page. Nous devons choisir une méthode d'état caché appropriée en fonction des besoins réels et combiner les caractéristiques de v-if et v-show pour optimiser l'efficacité du rendu des pages et l'expérience utilisateur. 🎜

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!