Vue v-if条件渲染指令的用法（附带实例）

条件渲染是 Vue 控制 HTML 页面渲染的方式之一。很多时候，我们都需要通过条件渲染的方式来控制 HTML 元素的显示和隐藏。在 Vue 中，要实现条件渲染，可以使用 v-if 指令，也可以使用 v-show 指令。

简单来讲，v-if 指令可以有条件地选择是否渲染一个 HTML 元素。v-if 指令可以设置为一个 JavaScript 变量或表达式，当变量或表达式为真值时，其指定的元素才会被渲染。

为了方便代码测试，我们可以新建一个名为 3.condition.html 的测试文件，在其中编写代码。最简单的条件渲染示例如下：

<h1 v-if="show">标题</h1>

在上述代码中，只有当 show 变量的值为真时，当前标题元素才会被渲染。

Vue 模板中的条件渲染 v-if 指令类似于 JavaScript 编程语言中的 if 语句。我们知道，在 JavaScript 中，if 关键字可以和 else 关键字结合使用组成 if-else 块，在 Vue 模板中，也可以使用类似的条件渲染逻辑，v-if 指令可以和 v-else 指令结合使用，示例如下：

<h1 v-if="show">标题</h1>
<p v-else>如果不显示标题就显示段落</p>

运行代码，可以看到，标题元素与段落元素是互斥出现的，如果根据条件渲染出了标题元素，则不会再渲染出段落元素，如果条件控制不渲染标题元素，则会渲染出段落元素。

需要注意，在将 v-if 与 v-else 结合使用时，设置了 v-else 指令的元素必须紧跟在 v-if 或 v-else-if 指令指定的元素后面，否则其不会被识别到。例如下面的代码：

<h1 v-if="show">标题</h1>
<h1>Hello</h1>
<p v-else>如果不显示标题就显示段落</p>

运行后的效果如下图所示：


其实，如果你在 VS Code 中编写了上述代码并运行，VS Code 开发工具的控制台也会打印出相关异常信息，提示 v-else 指令使用错误，如下图所示。


在 v-if 与 v-else 指令之间，我们还可以插入任意 v-else-if 指令来实现多分支渲染逻辑。在实际应用中，多分支渲染逻辑也很常用，例如根据学生的分数来将成绩进行分档，就可以使用多分支逻辑。示例代码如下：

<h1 v-if="mark == 100">满分</h1>
<h1 v-else-if="mark > 60">及格</h1>
<h1 v-else>不及格</h1>

v-if 指令的使用必须添加到一个 HTML 标签元素上，如果我们需要使用条件同时控制多个标签元素的渲染，有两种方式可以实现。
1) 使用 div 标签对要进行控制的元素进行包装，示例如下：

<div v-if="show">
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
</div>

2) 使用 template 标签对元素进行分组，示例如下：

<template v-if="show">
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
</template>

通常，我们更推荐使用 template 分组的方式来控制一组元素的条件渲染逻辑，因为在 HTML 渲染元素时，使用 div 包装组件后，div 元素本身会被渲染出来，而使用 template 进行分组的组件渲染后，并不会渲染 template 标签本身。

我们可以通过 Chrome 浏览器来验证这种特性。在 Chrome 浏览器中，按 F12 键打开开发者工具界面，也可以通过单击菜单栏中的“更多工具”→“开发者工具”选项来打开此界面，如下图所示。


从开发者工具界面的 Elements 栏目中，可以看到使用 div 和使用 template 标签对元素组合包装进行条件渲染的异同，如下图所示。