A brief analysis of the differences between Vue's commonly used instructions v-if and v-show

A brief analysis of the differences between Vue's commonly used instructions v-if and v-show

Preface

v-show and v-if are commonly used Vue instructions, often used to determine the rendering of some code blocks, but what is the specific difference between the two? ? ?

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

The Vue Chinese community documentation simply states: Conditional judgment is performed during 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 or false value. It is responsive

Syntax expression v-show = "expression"

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

The content after the instruction will eventually be parsed as a Boolean value

When the value is true, the element is displayed; when the value is false, the element is hidden.

After the data changes, the display status of the corresponding elements will also be updated synchronously

<body>
		<div id="app">
			<input type="button" value="Toggle display" @click="changeIsShow" />
			<p v-show="isShow">I'm not pretending anymore. I'm telling you the truth. Yes, I'm the one you're looking for</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					isShow:false
				},
				methods:{
					changeIsShow(){
						this.isShow = !this.isShow
					}
					
				}
			})
		</script>
	</body>

2. v-if

The function of the v-if instruction: switch the display state of the element according to the truth or falseness of the expression

v-if = "expression"

The essence is to switch the display by manipulating DOM elements

When the value of the expression is true, the element exists in the DOM tree, and when it is false, it is removed from the DOM tree.

<body>
		<div id="app">
			<input type="button" value="Click me to switch display" @click="changeIsShow" />
			<p v-if="isShow">I'm not pretending anymore. I'm telling you the truth. Yes, I'm the one you're looking for</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					isShow:false
				},
				methods:{
					changeIsShow(){
						this.isShow = !this.isShow
					}
				}
			})
		</script>
	</body>

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

1. Differences in principle

  • v-show directive: The element is always rendered to HTML. It is just a simple pseudo-element that sets the CSS style attribute. When the element that does not meet the conditions is set to style="display:none", it is determined by modifying the CSS attribute (display) of the element to show or hide.
  • v-if directive: if the conditions are met, it will be rendered into HTML, if the conditions are not met, it will not be rendered into HTML, and the display is switched by manipulating DOM elements

2. Differences in usage scenarios

  • v-if needs to operate DOM elements, which has higher switching cost.
  • v-show just modifies the CSS properties of the element and has a higher initial rendering cost.
  • If you need to switch very frequently, it is recommended to use v-show. If the conditions rarely change during runtime, it is better to use v-if.

Summarize

This is the end of this article about the difference between the commonly used Vue instructions v-if and v-show. For more information about the difference between the Vue instructions v-if and v-show, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Introduction to the difference between v-if and v-show in VUE
  • Vue conditional rendering v-if and v-show
  • How to distinguish between v-show and v-if in Vue
  • A brief understanding of the difference between v-if and v-show in Vue
  • Detailed explanation of the difference between v-if and v-show in Vue
  • The differences and similarities between v-show and v-if in Vue and the usage of v-show
  • Vue uses v-if v-show page flashing, div flashing solution
  • Causes and solutions for flashing caused by v-if/v-show/interpolation expressions in Vue
  • Vue implements the bullet box mask, clicks on other areas to close the bullet box, and introduces the difference between v-if and v-show
  • About the difference between v-if and v-show in vuejs and the problem that v-show does not work
  • The difference between v-if and v-show in vue learning notes
  • In-depth understanding of v-if and v-show in vue.js
  • Notes on using v-show and v-if in Vue.js
  • Introduction to the usage of v-show and v-if instructions in Vue.js

<<:  MySQL 8.0.22 winx64 installation and configuration graphic tutorial

>>:  Solve the problem that images and other resources are automatically deleted after Tomcat is redeployed

Recommend

MySQL 8.0.12 installation and configuration method graphic tutorial (Windows version)

1. Introduction MySQL is used in the project. I i...

How to publish static resources in nginx

step Place the prepared static resource files in ...

Vue implements the countdown component for second kills

This article shares the specific code of Vue to i...

Quickly master the use of Docker to build a development environment

As the platform continues to grow, the project...

Detailed explanation of Xshell common problems and related configurations

This article introduces common problems of Xshell...

How to use axios request in Vue project

Table of contents 1. Installation 2. There is no ...

How does MySQL achieve multi-version concurrency?

Table of contents MySQL multi-version concurrency...

The process of building a development environment based on visual studio code + react

Development environment windows Development Tools...

Install Python virtual environment in Ubuntu 18.04

For reference only for Python developers using Ub...

JavaScript regular verification password strength implementation method

exhibit design Password strength analysis The pas...

Explanation of the process of docker packaging node project

As a backend programmer, sometimes I have to tink...

Detailed steps for installing and configuring MySQL 8.0 on CentOS

Preface Here are the steps to install and configu...

Implementation of nginx proxy port 80 to port 443

The nginx.conf configuration file is as follows u...

HTML embed tag usage and attributes detailed explanation

1. Basic grammar Copy code The code is as follows...

MySQL uses frm files and ibd files to restore table data

Table of contents Introduction to frm files and i...