Meet vue.js -------- Awen's vue.js study notes (7) ----- Conditional rendering

**
New learning and new journey, let us embark on the new long march of learning vue.js together

… … …

Meet vue.js -------- Awen's vue.js study notes (directory)

Pay attention to me, we learn and progress together.

1、v-if

Meaning: The v-if instruction is used to conditionally render a piece of content. This piece of content will only be rendered when the expression of the instruction is true. If false, it will not be rendered

for example:
Insert picture description here

2 、 v-else

Meaning: and v-if used in conjunction, to represent v-ifthe block else

That is, when the condition of v-if is not established (that is, the style of v-if will not be rendered), the style of v-else will be rendered

Simple example:
Insert picture description here

3、v-else-if

Meaning: It is a new vue 2.1.0 version of something, to act as v-ifthe else-if 块can be used continuously.

Simple example:
Insert picture description here

You can simply understand it as our if judgment statement previously learned in js

4、template

When we have many boxes to make a v-if conditional judgment, if v-if is used, then every box needs to be written, it will be very troublesome, so we can use v for all the needs -if judgment boxes are placed <template> </template>inside and then just use a v-if written in our template which can be judged

Simple example:
Insert picture description here

5、key

Our vue will render elements as efficiently as possible, and usually reuse existing elements instead of rendering from scratch.

for example:

!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="a">
			<template v-if="jiedian==='zhanghao'">
				<lable>账号</lable>
				<input type="text" placeholder="please enter zhanghao">
			</template>			
			<template v-else>
				<lable>密码</lable>
				<input type="text" placeholder="please enter password">
			</template>
			
			<input type="button" value="点击切换" v-on:click="dianji"> 
		</div>
		
		<script>
			var vm = new Vue({
    
    
				el:"#a",
				data:{
    
    
					jiedian: 'password'
				},
				methods:{
    
    
					dianji:function(){
    
    
						if(this.jiedian == 'zhanghao'){
    
    
							this.jiedian="password"
						}else{
    
    
							this.jiedian="zhanghao"
						}
					}
				}
			})
		</script>
	</body>
</html>

Execution result: You can find that our input node below is not re-rendered when we switch in this example. It just changes the content of the placeholder inside.
Insert picture description here
Therefore, if we have content in the input box, after clicking the switch, The content of the input box will not disappear,

but this situation sometimes does not meet our needs, so we have to separate the two elements and cancel the default "reuse" attribute

Then directly add a keyproperty to the two independent open to
Insert picture description here
the results: you can find now, but it will not re-render reuse

Supplement::
placeholderUsed to add placeholders.

6、v-show

v-show Similar to the role of v-if, we choose whether to display our rendering results according to conditions.

Simple example: because the condition is true, it will be displayed, if the condition is false, it will not be displayed
Insert picture description here

Note:
Our v-show will render yuan'su into dom from beginning to end, but it is judged whether to display it based on the conditions true and false. ( v-showJust simply switch the display in the CSS property of the element)

7. Compare v-show and v-if

(1) It v-ifis "real" conditional rendering, because it will ensure that event listeners and subcomponents in the conditional block are properly destroyed and rebuilt during the switching process. (It is rendered or not rendered according to the true or false of the condition, or the rendered element is destroyed when the condition is false)

(2) It v-ifis lazy: if the condition is false at the initial rendering, nothing is done , The conditional block will not start to render until the condition becomes true for the first time.

(3) In contrast, v-showit is much simpler-no matter what the initial condition is, the element will always be rendered at the beginning, and based on whether the condition is true or false, it simply switches whether to display or not based on CSS.

(4) In general, v-ifa higher switching overhead, and v-showhas a higher initial cost of rendering. Therefore, if the very frequently need to switch, is used v-showpreferably; if rarely changed at run time conditions (not frequently switch), is used v-ifpreferably.

8. Use v-if and v-for at the same time

When v-ifand v-forwhen used together, v-forthan v-ifa higher priority. This means that our v-if will be repeatedly applied to each v-for loop. This priority mechanism is very useful when we need to add attributes to certain nodes

Simple example: You can find that he will traverse one, and then execute the v-if judgment, so the last condition that does not match is not rendered
Insert picture description here
, if it is false, it will be rendered, so only "I love games" is rendered

Insert picture description here
Of course, because the priority of v-for is greater than v-if, if you want to prevent the entire list from being rendered, you can add v-if to the parent tag of the list li,

Simple example:
Insert picture description here

**
Follow the campus official account, reply to the web front-end to receive a free 50G front-end learning materials, let's learn and make progress together.
Insert picture description here
**
Shen Congwen once said: "I know you are back, so I will wait"