How to hide elements in vue

Vue method of hiding elements: 1. Use the "v-if" command to display or hide elements by dynamically adding or deleting DOM elements to the DOM tree; 2. Use "v-show" Instructions to control visibility by setting the display style attribute of DOM elements.

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

vue controls the display and hiding of elements

Solution:

v Both the -if instruction and the v-show instruction can dynamically control the display and hiding of DOM elements based on the value. v-if and v-show are commonly used internal instructions in Vue. The responsibility of the instruction is to change certain special elements when the value of the expression changes. Behaviors are applied to the DOM.

• v-if will directly delete the element

• ##v -show just hides, simply toggling the element's CSS property display.

   <p v-show="showGroup">
        <p class="formTitle">图层组</p >
    </p >

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

and then set the default value of showGroup to false in the js code. That is, when it is first started, it will not be displayed by default. If you want to display this p later, you can set the vm directly. showGroup=true

Related recommendations: "

vue.js tutorial"

The above is the detailed content of How to hide elements in vue. For more information, please follow other related articles on the PHP Chinese website!