Vue 学习笔记：v-if和v-show的区别（一）

最新推荐文章于 2025-05-19 20:08:33 发布

boonyaxnn

最新推荐文章于 2025-05-19 20:08:33 发布

阅读量247

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/boonyaxnn/article/details/94473118

vue 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了Vue.js中v-if与v-show指令的区别。v-if实现真正的条件渲染，确保在切换过程中事件监听器和子组件适当地被销毁和重建。v-show则通过CSS切换显示状态，无论初始条件如何，元素始终会被渲染。v-if有更高切换开销，适用于条件变化少的情况；v-show有更高初始渲染开销，适合频繁切换。

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

1、v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；

2、v-if是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

3、v-show：不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换；

4、v-if有更高的切换开销，而 v-show 有更高的初始渲染开销。

因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

 <div>
       <p v-if="flag">西游记</p>
       <p v-else>红楼梦</p>
       <p v-show="flag">三国演义</p>
       <p>水浒传</p>
 </div>

<script>
export default {
    name:'Index',
    data(){
        return{
            flag:true
        }
    }
}
</script>