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>