V-if跟V-show的区别

最新推荐文章于 2025-07-06 22:36:32 发布

原创最新推荐文章于 2025-07-06 22:36:32 发布 · 762 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

个人日常工作学习杂货铺同时被 2 个专栏收录

8 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文通过实例对比分析了Vue中v-if与v-show指令的使用场景及性能差异。v-show通过改变display属性控制元素显示，适用于频繁切换的情况；而v-if则将元素从DOM树中移除，适合不频繁切换的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相信很多vue的初学者都对这两个指令的文档说明一脸懵逼,我刚开始的时候也是,下面就直接用一个例子来做一个最直观的表达.

用过这两个指令的都知道这两个指令是控制元素的显示跟隐藏,我也就不再过多介绍这两个指令的用法了,直接上代码吧

    <style>
        img{
            width: 200px;
        }
    </style>
</head>
<body>
        <div id="app">
                <input type="button"  value="点击图片显示隐藏" @click='isShow = !isShow'>
                <img src="./img/1.png"  v-show="isShow" alt="">
                //第一张照片用的是v-show
                <img src="./img/2.png" v-if='isShow' alt="">
                //第二张照片用的是v-if
                
         </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            
            isShow:true
        },
     
    })
</script>

在这里插入图片描述
接下来点击按钮让他们隐藏

	**现在可以得出一个结论:
	 v-show:
        操纵display 为 none 或者block 元素在dom树中还是存在的
        适用情况:
            因为操纵dom树比较耗性能,所以如果元素需要频繁的切换显示和隐藏 一般 使用v-show
    v-if:
        会把元素从dom树中移除,是真的没有了
        使用情况:
            不是频繁切换显示和隐藏,可以使用v-if**