How vue controls the hiding and display of elements

Vue how to control the hiding and display of elements, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

Vue control element hiding and display methods: 1, the use of "v-if" and "v-else" instructions to control hidden; 2, the use of "v-show" instruction, by switching the CSS display attribute of the element to control hidden; 3, directly set the element display or opacity style to control hidden.

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

Several methods to control the hiding and display of elements in vue

1. V-if v-else instruction

2 、 v-show

Layer group

For example, if you want to hide the above div, add a v-show attribute to the div. 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 div later, you can simply set vm.showGroup=true.

3. Display:none & opacity:0 [obtain the dom element by attribute binding or ref to set display:none or transparency] & & move the element outside the document visual area (transform:translate ()) [hide, show, and combine animation to achieve cool effect in disguise]

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.