How to set the display and hide of elements in vue

Method: You can use v-if or v-show instructions.

The v-if directive displays or hides elements by dynamically adding or removing DOM elements to the DOM tree;

The v-show directive controls visibility by setting the display style attribute of the DOM element.

the difference:

v-if will delete the element directly

v-show just hides and simply toggles the element's CSS property display.

v-show example:

For example, if you want to hide the button below, add a v-show attribute to this div, and the name I wrote is showButton.

<div v-show="showButton">

<Button>Button</Button>

</div>

Set the default value of showButton to false, the default is not to display, and the value of shouButton to true is to display.

Without further ado, here are the code screenshots:

 Modify the value of show when an event is triggered

That’s it~

 

 

Guess you like

Origin blog.csdn.net/smallmww/article/details/128885136