热门面试题：v-show和v-if的区别

v-show 和 v-if 都可以控制dom元素的显示和隐藏，那么具体区别是什么呢？
话不多说，先来段代码对比一下，就会更容易明白，希望能对你有所帮助哦
1、先来看 v-show

<div id="app">
    <input type="button" value="显示/隐藏" v-on:click="fn()">
    <p v-show="isShow" v-bind:style="bgc">我是一个p标签</p>           
 </div>

<script src="./js/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isShow: true,  // 默认显示
            bgc: "background-color:red"   //设置背景色为红色
        },
        methods: {
            fn: function() {
            //显示状态下，点击按钮后进行隐藏，反之显示
                this.isShow = !this.isShow;
            }
        }
    })
</script>

我们来看一下执行结果


通过上面两张效果图我们可以得出结论：v-show利用的是display属性来控制DOM元素的显示和隐藏！！！

2、接下来我们一起看看v-if的执行结果

<p v-if=“isShow” v-bind:style=“bgc”>我是一个p标签</p>
把上面的代码里的v-show改成v-if就可以了

明显可以看出，用v-if来控制显示和隐藏，实际是进行DOM的增加和删除操作，会影响DOM树结构

应用场景：
需要频繁切换显示隐藏的情况下，使用v-show；切换不频繁的用v-if