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

Detailed explanation of the difference between var, let and const in JavaScript

Table of contents As a global variable Variable H...

How to use the Linux more command in Linux common commands

more is one of our most commonly used tools. The ...

Solve the error "Can't locate ExtUtils/MakeMaker.pm in @INC"

When installing mha4mysql, the steps are roughly:...

The latest super detailed graphic tutorial of installing Kali Linux on virtual machine VMware

Table of contents 1. Download the system image fi...

Understand the principles and applications of JSONP in one article

Table of contents What is JSONP JSONP Principle J...

Differences and comparisons of storage engines in MySQL

MyISAM storage engine MyISAM is based on the ISAM...

About Docker security Docker-TLS encrypted communication issues

Table of contents 1. Security issues with Docker ...

Detailed explanation of SSH password-free login configuration under Linux

Assume there are two Linux servers A and B, and w...

A brief discussion on the use of Web Storage API

Table of contents 1. Browser local storage techno...

React homepage slow loading problem performance optimization case detailed explanation

After studying React for a while, I want to put i...

Why Nginx is better than Apache

Nginx has taken over the majority of the Web serv...

CSS to achieve Skeleton Screen effect

When loading network data, in order to improve th...

Win2008 R2 mysql 5.5 zip format mysql installation and configuration

Win2008 R2 zip format mysql installation and conf...

Problem record of using vue+echarts chart

Preface echarts is my most commonly used charting...

XHTML tags should be used properly

<br />In previous tutorials of 123WORDPRESS....