Home>Article>Web Front-end> How to hide the current element in vuejs
The implementation method of hiding the current element in vuejs: 1. After the page is mounted, listen to the global click event; 2. Get the currently clicked element and obtain the attributes of the current element itself according to the needs; 3. Determine the current click Whether the element is the same as the element to be hidden; 4. If the currently clicked element is not the same as the element to be hidden, it will be hidden.
The operating environment of this article: Windows 7 system, vue version 2.9.6, DELL G3 computer.
How to hide the current element in vuejs?
Vue implements clicking outside the current element to hide the current element (implementation idea)
1. Binding elements
2. mounted life cycle
3. Implementation idea
4. Final effect
Then let’s take a look at other aspects of the page outside the target element that vue implements. Hide the pop-up window in place
Method:
Step 1: Add a click event to the outermost element p on the page: @click="popShow = false”.
Step 2: Add a click event to the click target element: @click="popShow = true".
Note: popShow is a flag that controls the display and hiding of pop-up windows.
PS: Let’s take a look at vue’s implementation of clicking elsewhere to hide p
Method 1:
By listening to events
document.addEventListener('click',function(e){ if(e.target.className!='usermessage'){ that.userClick=false; } })
Method 2 (better):
Add a click event to the outermost p@click="userClick=false "
Addto the clicked element: @click.stop="userClick=!userClick"
Method 3:
...
Summary:
The .stop modifier of the vue.js event can prevent the event from continuing to bubble and propagate, or you can use the event.stopPropagation() method of the native js event.
By adding .stop to the specified p, you can realize that only when you click on an element that is not within the p, it will bubble up to the page, thereby hiding the p when you click elsewhere.
You need to add .stop to the button that triggers the display of p. Otherwise, as soon as the button is clicked, show() is triggered and then propagated to the page, hide() will be triggered immediately, and p will not be displayed.
Recommended: "The latest 5 vue.js video tutorial selections"
The above is the detailed content of How to hide the current element in vuejs. For more information, please follow other related articles on the PHP Chinese website!