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

Vue detailed introductory notes

Table of contents 1. Introduction 2. Initial Vue ...

Why MySQL chooses Repeatable Read as the default isolation level

Table of contents Oracle Isolation Levels MySQL I...

In-depth understanding of Mysql logical architecture

MySQL is now the database used by most companies ...

CSS3 implements horizontal centering, vertical centering, horizontal and vertical centering example code

As a front-end monkey, whether it is during an in...

Implementing Binary Search Tree in JavaScript

The search binary tree implementation in JavaScri...

mysql8.0.0 winx64.zip decompression version installation and configuration tutorial

This article records the installation tutorial of...

Detailed explanation of Alibaba Cloud security rule configuration

Two days ago, I took advantage of the Double 11 s...

Node.js+express+socket realizes online real-time multi-person chat room

This article shares the specific code of Node.js+...

Encoding problems and solutions when mysql associates two tables

When Mysql associates two tables, an error messag...

img usemap attribute China map link

HTML img tag: defines an image to be introduced in...

Summary of CSS counter and content

The content property was introduced as early as C...

17 404 Pages You'll Want to Experience

How can we say that we should avoid 404? The reas...

Detailed explanation of the code for implementing six sieve styles using HTML grid layout

First, attach the code below the effect diagram &...

Detailed explanation of Vue routing router

Table of contents Using routing plugins in a modu...

How to query date and time in mysql

Preface: In project development, some business ta...