How to hide content in vue

Vue method of hiding content: 1. Add "v-show" to the content div that needs to be hidden or displayed; 2. Add a click event to the div of the iconfont icon; 3. Wrap it with transition at × , and add the name attribute; 4. Add an effect style to the fade.

#The operating environment of this tutorial: Windows 10 system, Vue version 3, Dell G3 computer.

vue How to hide content?

vue implements the function of clicking on a div to appear and hide content

1. First add v-show to the content div that needs to be hidden or displayed, which represents Determine whether to show or hide

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

2. Here I have a × sign in the open content to turn off the display effect, and add a click event to the div of the iconfont icon

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

3. In export The code in default is as follows

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

to achieve

4. Add a transition animation effect to hide it, as follows

Wrap the × with transition and add the name attribute

<transition name="fade">
 <div class="activity-sheet-close" @click="toggleSupportShow">
            <span class="iconfont icon-close"></span>
 </div>
 </transition>

Add effect style to fade, add

&.fade-enter-active,&.fade-leave-active
        transition opacity .8s
&.fade-enter,&.fade-leave-to
        opacity 0

in style to achieve

Recommended learning: "vue.js video tutorial"

The above is the detailed content of How to hide content in vue. For more information, please follow other related articles on the PHP Chinese website!