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里面内容也不会渲染。
您的批评是对我最大的鼓励，欢迎指正。