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 small knowledge — Vue common instruction V-if condition judgment

1. Introduction to the V-if command

  • v-ifThe instruction toggles the display and hide elements, depending on whether the expression value is true or falsedomElements.
  • v-ifandjsIn theifAlmost. There will bev-else-ifandv-else.jsIn theifJudgment is used injsThe judgment in grammar,v-ifinvueIs the judgment of the code block.

As follows

<p v-if="isShow">Cut it out. I'm on the table. Yeah, I'm the one you want</p>
Copy the code

P tags are generated and displayed on the page when the directive’s judgment isShow is true, and are not generated at compile time.

2. Code Demonstration 1

The HTML and JS codes are as follows

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
		<title>V - if instructions</title>
	</head>
	<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>
</html>
Copy the code

The results

3. Code Demonstration 2

Use the V-if directive on elements and templates:


<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>Vue test examples</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">Now you see me</p>
    <template v-if="ok">
      <h1>Essentials for programmers</h1>
      <p>Learning is not only technology, but also dream!</p>
      <p>Ha ha ha, programmer typing hard!!</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app'.data: {
    seen: true.ok: true}})</script>
</body>
</html>
Copy the code

Here, the V-if directive determines whether to insert the p element based on the value (true or false) of the expression seen.

Running results:

4. To summarize

  • v-ifThe directive toggles the display state of an element based on whether an expression is true or false
  • The essence is through manipulationdomElement to switch the display
  • The value of the expression istrueWhen the element exists indomFor the treefalsefromdomRemove the tree

5. 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! 🌹