What is the difference between v-show and v-if in vuejs

Difference: 1. "v-if" dynamically adds or deletes DOM elements into the DOM tree, "v-show" controls the display and concealment by setting the display style attribute of the DOM element; 2. Compilation process Different; 3. The compilation conditions are different; 4. The switching cost of "v-if" is high, the initial rendering cost of "v-show" is high, etc.

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

The difference between v-if and v-show

v-if command and v-show command can both be used Dynamically control the display and hiding of DOM elements based on the value. v-if and v-show are commonly used internal instructions of Vue. The responsibility is to apply certain special behaviors to DOM when the value of the expression changes.

Description

v-if

v-ifCommand Used to conditionally render a piece of content. This piece of content will only be rendered when the expression of the directive returns the truthy value.

<div v-if="show">show</div>
<div v-else>hide</div>

v-show

v-showThe usage of the command is roughly the same, except that it contains v-show The directive's element will always be rendered and remain in the DOM, v-show simply toggles the element's CSS property display.

<div v-show="show">show</div>

Difference

• Implementation method: v-if is dynamic to DOM Add or delete DOM elements in the tree, v-show is controlled by setting the display style attribute of the DOM element Reveal and conceal.

• Compilation process: v-ifSwitching has a process of partial compilation and uninstallation. During the switching process, the internal event listeners and sub-components are properly destroyed and rebuilt, v-show is just a simple switch based on CSS.

• Compilation conditions: v-if is lazy, if the initial condition is false, do nothing, only when the condition becomes true for the first time Only when partial compilation starts, v-show is compiled under any conditions and then cached, and the DOM elements are retained.

• Performance consumption: v-if has a higher switching cost, v-show has a higher initial rendering cost.

• Usage scenarios: v-if is suitable for situations where conditions are unlikely to change, v-show is suitable for situations where conditions are frequently switched.

Related recommendations: "vue.js Tutorial"

The above is the detailed content of What is the difference between v-show and v-if in vuejs. For more information, please follow other related articles on the PHP Chinese website!