2021-09-10 v-if和v-show的异同和用法

简答

v-if是局部编译/卸载的过程，初始如果是false就不会编译了
v-show是display：none，即使初始是none也会编译

共同点

都可以动态地显示或隐藏DOM元素

不同点

区别	v-if	v-show
手段	动态地向DOM树添加/删除DOM	设置DOM元素的display样式控制是否隐藏
编译过程	切换有个局部编译/卸载的过程,切换过程中销毁/重建内部的事件监听和子组件	基于css切换
编译条件	初始条件为假时什么也不做,只有为真才开始编译	任何条件下都被编译并保留DOM
性能消耗	有更高的切换消耗	有更高的初始渲染消耗
使用场景	适合不频繁改变的运营条件	适合频繁切换

示例

代码:

<div id="app">
    <div>
        <!-- 实际操作中,不推荐用v-if..v-else -->
        <div v-if="score>=90">优秀</div>
        <div v-if="score>=60&&score<90">及格</div>
        <div v-if="score<60">不及格</div>
    </div>
    <div>
        <div v-show="flag">
            时隐时现
        </div>
        <button type="button" @click="fn">点击隐藏/显示</button>
    </div>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            score:75,
            flag:true
        },
        methods:{
            fn(){
                this.flag=!this.flag
            }
        }
    });
</script>

结果:

1.score为75时输出及格
2.点击按钮选择隐藏或显示标签