条件判断，又叫做流程控制，主要的作用是用来判断给定的条件是否满足了某些表达式，所有的编程语言中都会有对应的条件判断语法规则。所以学习一门语言，在上面说的基础数据类型之外，有多另一个知识点，必须要掌握的，就是条件判断。大多数编程语言都使用if...else...来进行条件判断，还有部分语言使用if..then...，还有部分使用的是if...else....endif。语言的实现不同，但是内在机制都是一样的。让我们来看Vue.js中如何使用条件判断,两种方式一种为v-if，另一种是v-show,接下来我们详细说说。
思维导图v-if指令在Vue.js中条件判断是使用指令v-if进行判断。这里因为是一个模板语法，所以条件判断就是为了是否渲染页面内容，如果判断条件为真的情况下才把内容渲染到页面上。话不多说，直接看我们的代码。
这里为了演示效果，特意加了一个计时器，每三秒改变一下条件的状态。查看效果。
因为这里传不了动态图，就暂时先用这个方式进行展示。
divv-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元素的CSSdisplay状态，进行隐藏和显示元素信息，这里元素不管是否显示都会加载到页面上。当切换频率很高的时候，推荐使用该方式，当切换频率不高的情况下可以选择该方式，或者使用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就更加合适，因为初始化渲染一样也有额外的开销。
最后说一点现在先对使用有个大概的了解，后续会针对源码层进行解读。