【前端面试题】Vue项目中 v-if 和 v-show 的区别

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

@Dai

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

阅读量309

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端面试题文章标签：前端 vue.js 面试 vue css3

本文链接：https://blog.youkuaiyun.com/weixin_46318413/article/details/122494660

前端面试题专栏收录该内容

22 篇文章

订阅专栏

本文详细解析了Vue.js中v-if与v-show指令的区别，包括它们的工作原理、性能消耗及适用场景。v-if通过DOM操作实现元素的显示与隐藏，适用于业务复杂场景；而v-show则通过CSS控制display属性，更适合频繁切换的场景。

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

v-if 和 v-show 的区别

是什么？

v-if 和 v-show 都是可以通过条件，判断是否显示的，用法如下：

<template>
  <div class="about">
    <button v-if="1 == 2">按钮1</button>
    <button v-show="1 == 2">按钮2</button>
    <button>按钮3</button>
  </div>
</template>

从控制台可以看到 按钮1 使用的是 v-if，无法看到这个按钮的代码内容，也便无法在浏览器上显示。 按钮2 使用的是 v-show ，可以看到这个按钮的代码内容，但是 style 中增加了一个 display: none 的css。

区别在哪里？

方式不一样

v-if：操作 DOM

v-show：操作 style（display）

编译不一样

v-if ：DOM编译和卸载的过程，它是惰性的，条件为真时开始局部编译

v-show：基于css

性能不一样

v-if：消耗高（因为要操作dom）

v-show：消耗低，适合频繁切换

使用场景不一样

v-if：适合业务相对复杂的场景

v-show：适合频繁切换的场景

以上就是vue项目中v-if 和 v-show 的区别。
我会将自己平时项目中常见的问题以及笔试面试的知识在优快云与大家分享，一起进步，加油。