v-if和v-show的区别

胡崽崽!

于 2022-02-10 18:45:18 发布

阅读量210

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/m0_62198921/article/details/122867062

版权

本文详细介绍了Vue中的v-if和v-show指令在控制DOM元素显示隐藏时的相同点和不同点。v-if会删除和添加DOM元素，适合条件不大可能改变的场景；而v-show通过修改display样式控制显示，适合频繁切换，如商品tab切换。理解两者的差异有助于优化Vue应用的性能。

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

1. 都可以动态控制着dom元素的显示隐藏

v-if：控制DOM元素的显示隐藏是将DOM元素删除和添加
v-show：是通过标签的css样式display的值是不是none，控制显示隐藏，DOM元素还存在的

v-if 适合运营条件不大可能改变的场景下
v-show适合频繁切换
例如：v-show 用于商品tab切换