In vue, "v-if" is used to operate DOM elements according to the true or false expression, and can switch the display and hiding of 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 "v-if="expression"".

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

Usage of v-if in vue

v-if: Switch the display and hiding of elements (operating DOM elements) based on the true or false expression of the expression

(1) v-if application

 
{{message}}
 

The data will only be displayed when it is true

(2) v- if and v-else

 
{{message}}
 
hello
 

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

(3) Case: v-if and v-else Application

 
  用户账号    用户邮箱   切换类型 
   

After clicking the switch type, you can switch the display content. At this time, there will be a problem of input tag reuse (the content in the input box does not change after switching. This is a virtual DOM, as much as possible Reusing existing elements instead of creating new ones can improve performance). You can add key attributes. When the keys are the same, the content will be retained. When they are different, the content will not be retained.

[Related recommendations : "vue.js tutorial"】

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