v-show和v-if的区别

1、v-show

先看代码：

    

        
{{name}}
        切换
    
    

这里在data里设置isShow，默认值设为true。
打开控制台，效果图如下：

v-show.png

当点击“切换”按钮时，效果图如下：

v-show2.png

2、v-if

先看代码：

       
{{name}}
       切换

这里把v-show改成v-if。
打开控制台，看页面初始渲染时的效果图：

v-if1.png

当点击“切换”按钮时，效果图如下：

v-if2.png

v-show小结：

1、v-show仅仅控制元素的显示方式，通过display属性的none
2、当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销

v-if小结：

1、v-if会控制这个DOM节点的存在与否。
2、如果在运行时条件很少改变，则使用 v-if 较好。