v-if和v-show的区别

1.都是通过指令中的布尔值，决定是否展示对应的元素

        <div id="app">
            <h2 v-if="isShow" id="v-if">{{message}}</h2>
            <h2 v-show="isShow" id="v-show">{{message}}</h2>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const app = new Vue({
                el: '#app',
                data: {
                    message: 'hello',
                    isShow: true
                }
            })
        </script>

image.png
image.png

2.区别

v-if为false时，对应的h2标签不存在dom中

image.png

v-show为false时，对应的h2标签仍然存在在dom中，只是在行间添加了样式：dispaly:none，通过该样式控制h2标签是否显示到页面。

image.png

isShow为true时的dom结构

image.png

3.根据切换频率选择

在开发中选择v-if还v-show呢？
若该元素切换的频率高，则选择v-show，
若该元素切换的频率低，则选择v-if