条件渲染 之 v-if 和 v-show 的区别

vue动态显示DOM元素常用 v-if 和 v-show 这两种方式，但这两种是有区别的：

• v-if：当条件为false时，包含v-if指令的元素，根本就不会存在与dom中
• v-show：当条件为false时，v-show只是给元素添加一个行内样 display:none

区别	v-if	v-show
实现方式	动态地向DOM树内添加或者删除DOM元素	设置DOM元素的display样式属性来控制显隐(display="none")
编译过程	切换有一个局部编译/卸载的过程(切换过程中合适地销毁和重建内部的事件监听和子组件)	控制css进行切换
编译条件	初始值为false就不编译；只有在第一次条件变为真时才开始局部编译	在任何条件下（首次条件是否为真）都被编译
性能消耗	不停的销毁和创建（v-if 的初始化较快，但切换代价高）	只编译一次，保留DOM元素，之后通过控制css来控制显隐 （v-show 初始化慢，但切换成本低，性能更好）
使用场景	适合仅切换一次或不频繁切换的场景（应用更广）	适合频繁切换的场景（不常用）

eg1:

    
    
    


    

        
        
{{message}}
        
        
{{message}}
    

eg2:

    
    
    


    

        

            v-if和v-show都能实现元素的隐藏和显示，但v-if是将元素添加到dom或从dom移除，而v-show是通过为元素添加或移除{display:none}属性来实现隐藏和显示
        
        
        显示隐藏切换
        
我有一头小毛驴
        
我又有一头小毛驴
    

拓展：display:none 和 visible:hidden 都能把网页上某个元素隐藏起来。两者区别为:

• display:none ---使该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
• visible:hidden--- 使对象在网页上不可见，即在网页中不占任何的位置。