基础/条件渲染

v-if

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

这里说的是真值，不是单单指 true，你传 [] 也可以，不过我们一般会判断数组长度大于0 [].length > 0 或者对象有属性 Object.keys({}).length > 0

数据类型	转换为 true 的值	转换为 false 的值
Boolean	true	False
String	非空字符串	空字符串
Number	非0数值	0、NaN
Object	任意对象	null
Undefined	不存在	undefined

v-else

不能单独使用，必须跟在 v-if 或者 v-else-if 后面

v-else-if

不能单独使用，必须跟在 v-if 或者 v-else-if 后面

template 上的 v-if

<template v-if="true">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>
<div v-else>
  v-if 为 false，当前元素和所有子元素都不会渲染
</div>

<!-- 最终渲染为 -->
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

v-show

v-show就是单独的一个指令，没有 else 也没有 else-if

v-if vs v-show

v-if：真实的添加或删除 DOM 实现显示或隐藏，只有当返回值返回真值的时候才去添加DOM

v-show：控制 css 的 display: none 来实现隐藏，即使返回值返回假值，页面加载时DOM也会被添加