Shulou(Shulou.com)06/01 Report--

This article will explain in detail what is the difference between v-if and v-show in VUE. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

1. Common ground

All display DOM elements dynamically.

two。 Difference

(1) means: v-if dynamically adds or removes DOM elements to the DOM tree; v-show controls the display and concealment by setting the display style attribute of the DOM element.

(2) compilation process: v-if switching has a process of partial compilation / unloading, during which internal event listeners and subcomponents are destroyed and rebuilt appropriately; v-show is simply based on css switching.

(3) compilation conditions: v-if is lazy, if the initial condition is false, nothing is done; partial compilation starts only when the condition becomes true for the first time (compilation is cached? Compilation is cached and then partially unloaded when switching); v-show is compiled under any condition (whether the first condition is true or not), then cached, and the DOM element is retained

(4) performance consumption: v-if has higher handover consumption; v-show has higher initial rendering consumption.

(5) usage scenarios: v-if is suitable for operating conditions and is unlikely to change; v-show is suitable for frequent switching.

Tips: if the element that v-show acts on, the display:none in the css file cannot be displayed by setting it through v-show

Reason: v-show controls the display and concealment by modifying the element style of the element through js code. If value is false, set display: none; if value is true, set display:''; therefore, when value is true, only the display effect in element style can be cleared, but not the display effect in css.

As shown in the following figure, when value=true, v-show changes element.style, and because it is invalid, the display effect is determined by the display in the css file.

Solution: if you use v-show, hide DOM before vue parsing, try to set the value of display in the style property, not in the css file.

This is the end of the article on "what is the difference between v-if and v-show 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, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.