vue中v-show和v-if的区别

版权声明：本文为博主原创文章，未经博主允许不得转载。转载时请附上转载链接。 https://blog.csdn.net/qq_41009742/article/details/81330483

v-show 和v-if的区别

<div v-show="seen">hello, you see me!</div>
<div v-if="seen">hello, you see me!</div>
<script>
    var seen = true //var seen = false
</script>   

上述代码中v-show和v-if都可以实现相同的功能，但是v-show在任何情况下，都会被渲染并且保留在DOM中，v-show在seen为false的情况下，只是将display属性修改为none，而v-if只有在“真”的情况下，才能够被渲染并加入到DOM中，不然不会渲染且不加入到DOM中。

v-if有更高的切换开销，v-show有更高的初始渲染开销。所有频繁切换的选择v-show，运行条件很少改变时选择v-if。