v-if与v-show区别

1、区别

1、v-if删除dom元素

2、v-show设置display:none

2、应用场景　　

1、v-if只修改一次的时候可以使用v-if

2、v-show频繁切换的时候可以使用v-show

3、v-if案例

 <div id='app'>
        <div v-if="score < 60">
            不及格
        </div>
        <div v-else-if="score < 70">
            及格
        </div>
        <div v-else-if="score < 80">
            中等
        </div>
        <div v-else-if="score < 90">
            良好
        </div>
        <div v-else-if="score <= 100">
            优秀
        </div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                score: 65,
            }
        })
    </script>

4、v-show案例

<style>
        .box{
            width: 200px;
            height: 200px;
            background: aqua;
        }
    </style>

    <div id='app'>
        <div class="box" v-show="flag"></div>
        <button @click="flag=!flag">显示/隐藏</button>

    </div>
    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            flag:true,
        }
    })
    </script>