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

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

<div  v-show="shopShow">content</div>

2. I have a × number 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. The code in export default is as follows

 export default {
    data () {
      return {
        shopShow: false, //The default content does not display      }
    },
    methods: {
      toggleShopShow () {
         = ! // Make false to true display      },
    }
  }
</script>

It can be achieved

4. Add transition animation effects to its hidden, as follows

Wrap it with transition at × 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 in style

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

It can be achieved

Supplement: Vue js implements clicking on the blank space of the page to hide the specified div

<template>
    <!--Add a close to the pagedivEvent monitoring-->
  <div class="page" @click="hide">
  
    <!--Add to.stoppreventpageThe click event triggers，Causes to be unavailablediv-->
    <button @="show">Click to displaydiv</button>
    
    <!--Specifieddiv。Add to.stopprevent点击divWhen the elements inside，entiredivClosed-->
    <div @>
        ...
    </div>
    
  </div>
<template>

<script>
export default {
    methods:{
        show(){},
        hide(){}
    }
        
}
</script>

1. The event's .stop modifier can prevent the event from continuing to bubble, or use the () method of native js events.
2. By adding .stop to the specified div, you can achieve that only when you click an element that is not in the div, you will bubbling up to the page, thereby hiding the div in other places.
3. You need to add .stop to the button that triggers the display of the div. Otherwise, once you click the button, it will be transmitted to the page after triggering show(), and hide() will be triggered immediately, and the div will not be displayed.

Summarize

This is the article about Vue clicking on a div to display and hide content. For more related Vue clicking on a div to display and hide content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!