第一章—v-if

v-if

介绍

v-if是vue的一个条件渲染语法，官方文档对于它的解释为：

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

其实他的解释意思就是说当v-if里面的内容为true时，DOM节点里面的内容便可以渲染出来，反之则不会渲染。

例如：

<template>
		<div v-if="demo">
			渲染的内容
		</div>
	</div>
</template>

<script>
	export default{
		data:()=>{
			return{
				demo:true
			}
		}
	}
</script>

　　此时页面中就会将div中的元素渲染出来。

反之：

<template>
		<div v-if="demo">
			渲染的内容
		</div>
	</div>
</template>

<script>
	export default{
		data:()=>{
			return{
				demo:false
			}
		}
	}
</script>

　　div中的元素此时就不会显示。

此外，我们也可以用 v-else 添加一个“else 块”：

<h1 v-if="demo">内容1</h1>
<h1 v-else>内容2</h1>

　　当demo为true时，内容1便会被渲染出来，反之则会渲染出内容2.

 我们还可以用 v-else 添加一个v-else-if：

官网实例为：

<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>

　　其用法与v-else相同。

此外还应当注意，除了直接将v-if的内容设置为false外，还有一些元素隐形属性为false。

• false
• 0
• “”
• NAN
• undefined
• null

 当v-if设置为以上几种元素的时候，dom里面内容也不会渲染。

您的批评是对我最大的鼓励，欢迎指正。