条件渲染的说明》

1.使用v-show可以条件渲染

<h2 v-show="a">11</h2>

<script>
	const vm = new Vue({
		el:'',
		data:{
			a:true
			//当a为true时，如图1
			//当a为false时，如图2
		}
	})
</script>

图1（控制台）

图2

2.使用v-if做条件渲染

<h2 v-if="a"></h2>

使用v-if与template的配合使用

<template v-if="a">
	<h2></h2>
	<h2></h2>
</template>

3.使用v-else和v-else-if

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

总结
1. v-if
写法:
v-if=“表达式”
v-else-if=“表达式”
v-else=“表达式”
适用于:切换频率较低的场景
特点:不展示的DOM元素，直接被移除
注意: v-if可以和v-else-if,v-else一起使用，但要求结构不能被打破
2. v-show
写法:
v-show=“表达式”
使用于:切换频率较高的场景
特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉