How to use v-if in vue

This article is about how to use v-if in vue. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

In vue, "v-if" is used to manipulate DOM elements according to whether the expression is true or false, and you can switch between showing and hiding elements; when the value of the expression is true, the element exists in the dom tree; when the expression is false, the element is removed from the dom tree, and the syntax is "vMuf =" expression ".

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

The usage of v-if in vue

V-if: toggles the display and hiding of elements according to whether the expression is true or false (manipulates DOM elements)

(1) Application of v-if

{{message}}

The data is displayed only when it is true.

(2) v-if and v-else

{{message}} hello

Execute if when v-if is true, otherwise, execute else

(3) case: application of v-if and v-else

User account user mailbox switching type const app = new Vue ({el:'# app', data: {isUser: true}})

After clicking the switch type, you can switch the display content. At this time, there will be the problem of input tag reuse (the content in the input box does not change after switching, this is a virtual DOM, reuse existing elements as much as possible, instead of creating a new element, you can improve performance), you can add the key attribute, and the content will be retained when the key is the same, but not when it is different.

Thank you for reading! This is the end of the article on "how to use v-if in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!