How to control element display and hiding in vue

This article mainly explains "how to control element display and concealment in vue". The content in the article is simple and clear, easy to learn and understand. Please follow the editor's train of thought to study and learn "how to control element display and hiding in vue".

In vue, element display and concealment can be controlled through the "v-show" directive, which is simply based on CSS switching and can be controlled by setting the display style attribute of the DOM element.

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

V-show instruction

The v-show instruction controls whether the display attribute of the element is displayed or not. When the attribute value of v-show is true, the element is displayed, otherwise it will not be displayed.

V-show is to switch the displayCSS attribute of an element based on the true or false value of the expression (based on the Boolean value obtained by the expression)

The usage of v-show

1. Judge whether an element is shown or hidden.

To upload.

Whether the parameter list.power in the interface is equal to 1, if it is equal to 1, it is "true", otherwise it is "false", and then the v-show instruction is displayed when it is equal to true and hidden when it is false.

2. Ternary operator judgment

AI

In fact, this can also be simplified into the first form.

AI thank you for your reading, the above is the content of "how to control elements to show and hide in vue". After the study of this article, I believe you have a deeper understanding of how to control elements in vue to show and hide this problem, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!