Vue.js中v-show和v-if指令怎么用

小编给大家分享一下Vue.js中v-show和v-if指令怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

一、v-show指令

v-show指令可以用来动态的控制DOM元素的显示或隐藏。v-show后面跟的是判断条件，语法如下：

v-show="判断变量"

例如：

v-show="true"，表示显示DOM元素。

v-show="false"， 表示隐藏DOM元素。

看下面的示例：

运行效果：

将flag变量改为false，代码如下：

运行效果：

这里只会显示三个，但不会显示img元素。

二、v-if指令

v-if指令的用法和v-show指令的用法相同，都是用来控制DOM元素的显示或隐藏。代码示例如下：

运行效果：

三、v-show和v-if的区别

v-show和v-if都可以用来控制DOM元素的显示或隐藏，那么这两个指令有什么区别呢？

v-show和v-if指令的区别主要在于设置DOM元素隐藏的时候：

• v-show指令设置隐藏是为该元素添加css样式--display:none,但DOM元素还存在

• v-if指令设置隐藏是将DOM元素整个删除，DOM元素不在存在

看下面的示例：

v-show设置隐藏：

检查元素：

从生成的HTML结构中可以看出，索引不等于的元素被隐藏了，只是添加了CSS样式：display:node，但是该元素还存在。下面看看v-if

检查元素：

从生成的HTML结构中可以看出，索引不等于1的元素被隐藏了，这里是直接删除了img元素，不占用位置。

更详细的区别：（借鉴别人博客内容，博客地址：//www.yisu.com/article/240646.htm）

• 1.手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；

• 2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；

• 3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

• 4.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

• 5.使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。

四、v-else指令

v-else指令不需要表达式，但有一个限制条件：前一兄弟元素必须有v-if或者v-else-if指令。

用法：为v-if或者v-else-if添加"else 块"。

看下面的代码：

                            
        
num值：{{num}}
        
             Now you see me        
                
            Now you don't        
    
    

浏览器运行结果：

可以看到：num的值不大于5，所以v-if表达式的值为false，所以会显示v-else指令所在标签。

五、v-else-if

v-else-if使用限制：前一兄弟元素必须有v-if或者v-else-if。

用法：v-else-if表示v-if的"else-if"块，可以链式调用。

看下面代码：

                            
                                
             A         
        
             B        
        
            C        
        
            Not A/B/C        
    
    

浏览器运行结果：

以上是"Vue.js中v-show和v-if指令怎么用"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！