Comment masquer le contenu dans vue

Comment masquer le contenu dans vue : 1. Ajoutez "v-show" au div de contenu qui doit être masqué ou affiché ; 2. Ajoutez un événement de clic au div de l'icône iconfont 3. Enveloppez le × avec une transition ; et ajoutez un attribut de nom ; 4. Ajoutez un style d'effet au fondu.

L'environnement d'exploitation de ce tutoriel : système Windows 10, Vue version 3, ordinateur Dell G3.

Comment masquer du contenu dans vue ?

vue réalise la fonction de cliquer sur un div pour apparaître et masquer le contenu

1. Ajoutez d'abord v-show au div de contenu qui doit être masqué ou affiché, ce qui signifie juger s'il faut afficher ou masquer

<div  v-show="shopShow">内容</div>

2. Je suis ici Il y a un signe × dans le contenu ouvert pour désactiver l'effet d'affichage et ajouter un événement de clic au div de l'icône iconfont

<div  @click="toggleShopShow">
            <span class="iconfont icon-close"></span>
</div>

3 Dans la valeur par défaut de l'exportation, le code est le suivant.

 export default {
    data () {
      return {
        shopShow: false, //默认内容不显示
      }
    },
    methods: {
      toggleShopShow () {
        this.shopShow = !this.shopShow //使false变为true显示
      },
    }
  }
</script>

pour y parvenir

4. Ajoutez un effet d'animation de transition pour le masquer, comme suit

enveloppez la transition à

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!