Vue.js - Vue 中的条件渲染

Vue 中的条件渲染

---

今天说一下 Vue 中的条件渲染，通俗的说就是条件判断，判断各种条件是否执行。

新建一个最简单的 Vue 实例 :

先介绍一个 v-if 指令，编辑一下代码：

    
    
    


    

         
        
{{ message }}
    

    

v-if 等于后面跟着的依然是一个 JavaScript 表达式，这个表达式的 true 和 false ，也就是它的返回值决定了这个 div 标签是否被真实的挂载到页面之上。看一下上面的代码，我在 data 里定义了两个数据， shwo 和 message ，show 是一个布尔值，也就是真假， message 是一个人普通字符串数据，之前也看过很多次了。我们把 show 放到 v-if 后面的双引号里，现在 show 的值是 false ，很显然这个元素就不会挂载在页面上，在浏览器上我们看不到 Hello World 的输出。打开浏览器看一下:

show 为 false 时，

{{ message }}

没有挂载到页面上。我们在控制台将 show 的值更改为 true ，观察一下效果：

Hello World 显示了出来，div 标签也添加了到 thml 里。当 v-if 为 true 时元素就会添加进去，为 false 时就会删除。

还有一个跟 v-if 效果很类似的指令 v-show ，它两都可以让元素显示隐藏，不过也是有点不一样的，添加一下代码：

    
    
    


    

        
 v-if ：{{ message }}
          
        
v-show ：{{ message }}
    

    

加多了一个

{{ 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，修改一下代码：

    
    
    


    

        
        
{{ message }}
        
Bye World
    

    

打开浏览器，会发现显示在页面上的是 Bye World：

当我们把 show 给成 true 的时候，Hello World 就出来了:

这就是 v-if 和 v-else 的简单组合使用，记住，它们两个必须相邻写在一起！！！

还有这么一个组合 v-if 、v-else-if 、v-else 三个的组合， v-else-if 可以在中间添加多个进行判断，修改代码：

    
    
    


    

        
        
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 的使用方法。

讲一种比较特殊的情况，修改一下代码：

    
    
    


    

        

            用户名：
        
        

            密  码：
        
    

    

打开浏览器，操作一下:

会发现，当我们进行切换的时候，输入框里的内容并没有清除，这是为什么呢？

因为 v-if 、v-else 、v-else-if 这三个指令有一个尽量复用已有的标签，来增加渲染的速度，也就是说有共同标签的情况下，不会进行修改，只修改发生变化的部分，那应该怎样解决这个问题呢？

我们采用一个 key 值的办法。给两个 标签加上 key 。如下：

    
    
    


    

        

            用户名：
        
        

            密  码：
        
    

    

再试一下上面的操作，看看结果如何：

这样，刚刚出现的 bug 就没用了。当我们给元素加上 key 值之后，Vue 会知道这是唯一的一个元素，如果两个的 key 值不一样，就不会复用了。

---

公众号更精彩哦~