How vue hides elements

This article is about how vue hides elements. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Vue hidden elements of the method: 1, the use of "v-if" instruction, through the dynamic addition or deletion of DOM elements to the DOM tree to show or hide elements; 2, the use of "v-show" directive, by setting the display style attributes of DOM elements to control hidden.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Vue controls the display and hiding of elements

Solution:

Both v-if instruction and v-show instruction can dynamically control the hiding of DOM elements according to the value. V-if and v-show are commonly used internal instructions of Vue. The duty of the instruction is to apply some special behavior to DOM when the value of the expression changes.

V-if deletes the element directly

V-show is just hidden, simply switching the element's CSS attribute display.

Layer group

For example, if you want to hide the above p, then add a v-show attribute to the p. You can choose any name you want.

Then set the default value of showGroup to false in the js code, that is, when it is started, it is not displayed by default. If you want to display this p later, you can simply set vm.showGroup=true.

Thank you for reading! This is the end of this article on "how to hide elements in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!