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

This article mainly explains "what are the differences between v-if and v-show in Vue". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the differences between v-if and v-show in common Vue instructions?"

Catalogue

Preface

1. V-show

2. V-if

3. The difference between v-show and v-if

1. The difference in principle

two。 Differences in using application scenarios

Summary

Preface

V-show and v-if are commonly used Vue instructions, which are often used to judge part of the rendered code block, but what is the specific difference between the two?

First of all, let's take a look at the introduction of the Vue Chinese community documentation:

In the Vue Chinese community description document, it is simply: the condition judgment display is performed during the initial rendering.

1. V-show

The function of the v-show instruction is to switch the display state of the element according to the true and false values, which is responsive

Syntax expression v-show = "expression"

The principle is to modify the CSS attribute (display) of the element to decide whether to show or hide.

The content after the instruction will eventually be resolved to a Boolean value

The element is displayed when the value is true (true), and hidden when the value is false

After the data is changed, the display status of the corresponding elements will also be updated synchronously.

No, I had a showdown. That's right. I'm the one you're looking for.

Var app = new Vue ({el: "# app", data: {isShow:false} Methods: {changeIsShow () {this.isShow =! this.isShow} }) 2. V-if

The function of the v-if instruction: toggle the display state of the element according to the true or false of the expression

V-if = "expression"

The essence is to switch the display by manipulating dom elements.

The element exists in the dom tree when the value of the expression is true, and is removed from the dom tree when it is false

No, I had a showdown. That's right. I'm the one you're looking for.

Var app = new Vue ({el: "# app", data: {isShow:false} Methods: {changeIsShow () {this.isShow =! this.isShow}} }) 3. Difference between v-show and v-if

1. The difference in principle

V-show instruction: the element is always rendered to HTML, which simply sets the style attribute of css. When an element that does not meet the condition is set to style= "display:none", it is decided to show or hide by modifying the element's CSS attribute (display).

V-if instruction: if the condition is met, it will be rendered to html. If the condition is not met, it will not be rendered to html. It will be displayed by manipulating the dom element.

two。 Differences in using application scenarios

V-if needs to manipulate the dom element and has a higher switching cost.

V-show simply modifies the CSS attribute of the element to have a higher initial rendering cost.

If you need to switch very frequently, it is recommended to use v-show, and if the conditions rarely change at runtime, it is better to use v-if

Thank you for your reading, the above is the content of "what is the difference between v-if and v-show in Vue?" after the study of this article, I believe you have a deeper understanding of the difference between v-if and v-show in Vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.