Vue 中的条件渲染
今天说一下 Vue 中的条件渲染，通俗的说就是条件判断，判断各种条件是否执行。
新建一个最简单的 Vue 实例 :
Vue 中的条件渲染
先介绍一个 v-if 指令，编辑一下代码：
Vue 中的条件渲染
{{ message }}
v-if 等于后面跟着的依然是一个 JavaScript 表达式，这个表达式的 true 和 false ，也就是它的返回值决定了这个 div 标签是否被真实的挂载到页面之上。看一下上面的代码，我在 data 里定义了两个数据， shwo 和 message ，show 是一个布尔值，也就是真假， message 是一个人普通字符串数据，之前也看过很多次了。我们把 show 放到 v-if 后面的双引号里，现在 show 的值是 false ，很显然这个元素就不会挂载在页面上，在浏览器上我们看不到 Hello World 的输出。打开浏览器看一下:
show 为 false 时，show 的值更改为 true ，观察一下效果：
Hello World 显示了出来，div 标签也添加了到 thml 里。当 v-if 为 true 时元素就会添加进去，为 false 时就会删除。
还有一个跟 v-if 效果很类似的指令 v-show ，它两都可以让元素显示隐藏，不过也是有点不一样的，添加一下代码：
Vue 中的条件渲染
v-if ：{{ message }}
v-show ：{{ message }}
加多了一个 v-show 用的变量也是 show ，打开浏览器，会看到如图：
因为一开始它两的 show 都为 false ，所以都没有显示出来，但是 v-show 的 div 标签已经挂载到了 html 文件里。
在 Console 修改一下 show 的值改为 true:
两个 div 标签里的内容都显示了出来, v-if 的 div 标签也能在 html 文件上看得到:
进行对比，v-if 和 v-show 都可以控制一个模板标签是否在页面上显示。当 v-if 指令只要对应的变量值为 false ，它所对应的标签不存在于 DOM 页面之上，就是还没有创建出来。只有当它为 true 显示出来时，才会把它创建出来。而 v-show 的 div 元素早已创建好在 DOM 页面之上，只是加了个 display: none 属性，让它隐藏了起来，为 true 也只是把 display: none 给去掉了而已。
在需要频繁切换隐藏显示的时候， v-show 的性能会比 v-if 好很多。因为 v-if 每次都要对整个标签进行添加和删除。
v-if 有一个跟它配对的指令，v-else，修改一下代码：
Vue 中的条件渲染
{{ message }}
Bye World
打开浏览器，会发现显示在页面上的是 Bye World：
当我们把 show 给成 true 的时候，Hello World 就出来了:
这就是 v-if 和 v-else 的简单组合使用，记住，它们两个必须相邻写在一起！！！
还有这么一个组合 v-if 、v-else-if 、v-else 三个的组合， v-else-if 可以在中间添加多个进行判断，修改代码：
Vue 中的条件渲染
This is A
This is B
This is others
把 message 这个数据删除了，show 改成了一个字符串 a 。打开浏览器会看到 This is A，因为 show 的默认值是 a ，我们在 Console 调试窗口分别修改成 b 和 a 、b 以外的值看看效果：
对应的判断条件会输出对应的 div 标签，显示不同的结果，这就是 v-if 、v-else-if 、v-else 的使用方法。
讲一种比较特殊的情况，修改一下代码：
Vue 中的条件渲染
用户名：
密 码：
打开浏览器，操作一下:
会发现，当我们进行切换的时候，输入框里的内容并没有清除，这是为什么呢？
因为 v-if 、v-else 、v-else-if 这三个指令有一个尽量复用已有的标签，来增加渲染的速度，也就是说有共同标签的情况下，不会进行修改，只修改发生变化的部分，那应该怎样解决这个问题呢？
我们采用一个 key 值的办法。给两个 标签加上 key 。如下：
Vue 中的条件渲染
用户名：
密 码：
再试一下上面的操作，看看结果如何：
这样，刚刚出现的 bug 就没用了。当我们给元素加上 key 值之后，Vue 会知道这是唯一的一个元素，如果两个的 key 值不一样，就不会复用了。
公众号更精彩哦~