Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

📝 [Vue] learn to form a record, [programmer essential knowledge]

📔 Today’s tip — the difference between Vue directives V-if and V-show

V-show and V-if are common Vue directives, often used to judge the rendering of a block of code, but what is the difference between the two?

1. v-show

  • v-showThe directive toggles the display state of an element based on true or false values
  • Grammar expressionV-show = "expression"
  • The principle is to modify elementsCSSProperties (display) to decide whether to implement show or hide
  • Everything that follows the instruction is eventually resolved to a Boolean value
  • Value is true,true), and the value is false (false) when the element is hidden
  • After the data changes, the display state of the corresponding element will also be updated synchronously
<body>
		<div id="app">
			<input type="button" value="Toggle display" @click="changeIsShow" />
			<p v-show="isShow">Cut it out. I'm on the table. Yeah, I'm the one you want</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>
Copy the code

2. v-if 

  • v-ifThe directive toggles the display state of an element based on whether an expression is true or false
  • V-if = "expression"
  • The essence is through manipulationdomElement to switch the display
  • The value of the expression istrueWhen the element exists indomFor the treefalsefromdomRemove the tree
<body>
		<div id="app">
			<input type="button" value="Click me toggle display" @click="changeIsShow" />
			<p v-if="isShow">Cut it out. I'm on the table. Yeah, I'm the one you want</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>
Copy the code

3. Difference between V-show and V-if

1. Differences in principles

  • v-showInstruction: Elements are always rendered toHTMLIt’s just a simple pseudo-element setupcssthestyleProperty when an element that does not meet the condition is setStyle = "display: none"By modifying the elementCSSProperties (display) to decide whether to implement show or hide
  • v-ifInstruction: conditions met will render tohtmlIs not rendered if the condition is not methtmlIs through manipulationdomElement to switch the display

2. Differences in application scenarios

  • v-ifNeed to manipulatedomElement, which has a higher switching cost.
  • v-showJust modify the element’sCSSProperties have a higher initial render cost.
  • Recommended if very frequent switching is requiredv-showBetter, if conditions rarely change at run timev-ifgood

4. Write in the back

Follow me, more content continues to output

  • CSDN
  • The Denver nuggets
  • Jane’s book

🌹 if you like, give it a thumbs up 👍🌹

🌹 feel harvest, can come to a wave of collection + attention, so as not to find you next time I 😁🌹

🌹 welcome everyone to leave a message exchange, criticism and correction, forwarding please indicate the source, thank you for your support! 🌹