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

Teach you how to subcontract uniapp and mini-programs (pictures and text)

Table of contents 1. Mini Program Subcontracting ...

Problems encountered when uploading images using axios in Vue

Table of contents What is FormData? A practical e...

js method to realize shopping cart calculation

This article example shares the specific code of ...

Analysis and solution of the problem that MySQL instance cannot be started

Table of contents Preface Scenario Analysis Summa...

Essential for front-end development: 12 browser compatibility testing tools recommended

For front-end developers, ensuring that the code ...

Linux kernel device driver kernel debugging technical notes collation

/****************** * Kernel debugging technology...

Tutorial on how to modify the root password in MySQL 5.7

Version update, the password field in the origina...

Native JavaScript to implement random roll call table

This article example shares the specific code of ...

Two ways to install the Linux subsystem in Windows 10 (with pictures and text)

Windows 10 now supports Linux subsystem, saying g...

Basic usage examples of Vue named slots

Preface Named slots are bound to elements using t...

Vue uses Split to encapsulate the universal drag and slide partition panel component

Table of contents Preface start Basic layout Data...

React implements a highly adaptive virtual list

Table of contents Before transformation: After tr...

css3 animation ball rolling js control animation pause

CSS3 can create animations, which can replace man...

The easiest way to debug stored procedures in Mysql

A colleague once told me to use a temporary table...

HTML fixed title column, title header table specific implementation code

Copy code The code is as follows: <!DOCTYPE ht...