我们来什么是条件判断？

条件判断， 又叫做流程控制， 主要的作用是用来判断给定的条件是否满足了某些表达式， 所有的编程语言中都会有对应的条件判断语法规则。 所以学习一门语言， 在上面说的基础数据类型之外， 有多另一个知识点，必须要掌握的， 就是条件判断。大多数编程语言都使用 if ... else ... 来进行条件判断， 还有部分语言使用 if.. then ...， 还有部分使用的是if ... else .... end if 。 语言的实现不同， 但是内在机制都是一样的。 让我们来看 Vue.js 中如何使用条件判断, 两种方式 一种为 v-if ， 另一种是 v-show, 接下来我们详细说说。

思维导图

v-if 指令

在 Vue.js 中条件判断是使用指令 v-if 进行判断。 这里因为是一个模板语法， 所以条件判断就是为了是否渲染页面内容， 如果判断条件为真的情况下才把内容渲染到页面上。 话不多说， 直接看我们的代码。

这里为了演示效果， 特意加了一个计时器， 每三秒改变一下条件的状态。查看效果。

因为这里传不了动态图， 就暂时先用这个方式进行展示。

<div v-if="showContent">{{ message }}</div>

我们这里使用最简单的用法， v-if="放入一个变量或者表达式"， 这里我们可以用在以下的场景， 只是举例， 不限制任何方式的使用。 用户权限不一致， 看到的内容不一样， 就可以使用该参数进行判断。

v-else

如果当某个用户是管理员，就显示管理员看到的页面， 如果不是就不允许查看， 这个时候， 我们就需要条件判断的另一个写法， 叫做 “然后” 或者 就叫做 “或者”。 用来标识例外的情况出现。 这个时候， 我们就可以使用 v-else 指令。需要注意的是 v-else 必须紧跟着 v-if 指令， 否则编译器将不会识别它。查看代码如下：

打开浏览器， 我们查看效果。

修改 adminFlag = false 然后再刷新页面， 这时将看到页面中 v-else 生效。 显示出对应的效果。

v-else-if

当我们需要多个条件判断的时候， 比方说根据用户等级显示对应的内容。 普通用户只有一个基础功能，中级用户可以查看高级功能， 高级用户可以查看所有功能。 这个时候， 我们就可以使用 v-else-if 进行判断。 具体代码如下所示：

当选择高级的时候， 就可以显示高级功能的页面，

我们修改成普通， 就会切换到对应的普通界面。

userLevel="普通"

修改成中级也是同样。

userLevel="中级"

需要注意的是， 这个和 v-else 一样， 也必须要紧跟着 v-if 或者 v-else-if， 否则也没有办法进行渲染对应的页面，

注意事项

这里需要注意的是， v-if 和 v-for 不能在同一层级上进行使用， 因为 v-if 的优先级比 v-for 要高， 所以才使用的时候， v-if 将无法使用 v-for 的变量， 可以在v-for 的内部使用。

v-show

根据表达式的真假值，切换 HTML 元素的 CSS display 状态， 进行隐藏和显示元素信息， 这里元素不管是否显示都会加载到页面上。当切换频率很高的时候， 推荐使用该方式， 当切换频率不高的情况下可以选择该方式， 或者使用 v-if 指令。 演示代码如下:

效果如下：

v-show 和 v-if 的区别

从上面的例子中， 我们分析一下，两个指令的区别和相同点。

相同点

都可以根据表达式进行元素的隐藏和显示。

不同点

v-if 是控制元素的创建和销毁。

v-show 是控制 CSS 的 display 属性。根据上面的例子我们看一下在页面渲染的时候的区别。这里使用一个最简单的案例来描述说明一下，案例代码如下：

查看浏览器的渲染代码， f12 进入开发者模式， 并找到 Elements 选项， 然后可以看到代码：

选中的那一行为 v-if 等于 false 的情况下， 这个时候， 元素并没有渲染到页面上， 而是用 <!--v-if--> 占位符占位了。 而 v-show 则使用了 style="display:none;" 进行隐藏了元素。 看到这就可以总结出来另一个经验出来。 因为 v-show 不管是否显示都会渲染数据到页面上元素上， 所以对于不管用不用都显示和渲染元素情况就特别适用于业务切换频繁的控制上， 因为 v-if 会有创建和销毁的过程， 在这个过程中会比 v-show 多了一些额外的处理。但是如果切换不频繁的情况下 v-if 就更加合适， 因为初始化渲染一样也有额外的开销。

最后说一点

现在先对使用有个大概的了解， 后续会针对源码层进行解读。关注我， 持续更新中。