display,visibility,opacity

The difference between display, visibility and opacity
Common point: All elements can be hidden and invisible
Difference:
display: none
(1) DOM structure: browserElements whose display attribute is none will not be rendered, and do not occupy space;
(2) Event monitoring: DOM event monitoring cannot be performed;
(3) Performance: Dynamically changing this attribute will cause rearrangement, and the performance is poor;
(4) Inheritance: will not be inherited by child elements, after all, subclasses will not be rendered;
(5) transition: transition does not support display.

visibility: hidden
(1) DOM structure: elements are hidden, but will be rendered and will not disappear, occupying space;
(2) Event monitoring: DOM event monitoring cannot be performed;
(3) Performance: Dynamically changing this property will cause redrawing, and the performance is high;
(4) Inheritance: It will be inherited by child elements, and child elements can be unhidden by setting visibility: visible;
(5) transition: transition supports visibility.

opacity: 0
(1) DOM structure: the transparency is 100%, the element is hidden, occupying space;
(2) Event monitoring: DOM event monitoring can be performed;
(3) Performance: improvedIt is a composite layer, it will not trigger redraw, and the performance is high;
(4) Inheritance: it will be inherited by child elements, and child elements cannot be unhidden by opacity: 1;
(5) transition: transitionOpacity is supported.

The bottom layer of v-show is the display attribute of the operation element
The bottom layer of v-if is the creation/destruction of the control element (create and delete dom)