What is the difference between v-if and v-show in Vue?

The difference between "v-if" and "v-sh" in Vue is: 1. "v-show" is only compiled once; while "v-if" is constantly destroyed and created; 2. " v-if" is more suitable for operations with permissions, and the permission data is judged during rendering; 3. v-show is more suitable for daily use, which can reduce data rendering and unnecessary operations.

In Vue, we can use v-if and v-show to control the rendering of elements or templates, and v-if and v-show also belong to Commonly used instructions within Vue (conditional rendering).

v-if and v-show are both displayed by judging the true\false of the bound data

The essential difference

## The essence of #vue-show is that the label display is set to none and the control is hidden.

vue-if dynamically adds or deletes DOM elements into the DOM tree

Differences in compilation

v-show is actually controlling css

v-if switching has a partial compilation/uninstallation process. During the switching process, the internal event listeners and sub-components are appropriately destroyed and rebuilt

Compilation conditions

v-show will compile, the initial value is false, just set display to none, but it also compiles.

v-if the initial value is false, it will not be compiled.

The difference in performance

v-show only compiles once, and then actually controls the css, while v-if keeps destroying and creating, so v-show performance Better.

Differences in usage

v-if is more suitable for operations with permissions. The permission data is judged during rendering. If it is present, the function will be displayed, and if not, it will be deleted. v-show is more suitable for daily use, which can reduce data rendering and unnecessary operations.

If your page does not want other programmers to see it, use v-if, it will not be displayed on the page.

【Related recommendations:

JavaScript Tutorial】

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