vue中v-if和v-show的区别

干到60岁退休的码农

于 2020-02-13 15:51:18 发布

阅读量358

点赞数

分类专栏： Vue 文章标签： js vue

原文链接：https://www.cnblogs.com/Ryan368/p/11337892.html

版权

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文探讨了Vue.js中v-if与v-show指令的工作原理及其性能差异。v-if通过条件渲染，每次切换会重新创建或销毁DOM节点，适用于频繁切换的情况。而v-show则通过改变元素的display属性实现切换，初次渲染成本较高，但后续切换速度快，适用于显示隐藏状态不常改变的场景。

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

v-if：每次都会重新创建或删除元素，具有较高的切换性能消耗；
v-show：每次切换元素的 display:none 样式，具有较高的初始渲染消耗。

<input type="button" value="shift" @click="flag=!flag>
<h1 v-if="flag">v-if 控制的元素 </h1>
<h1 v-show="flag">v-show 控制的元素 </h1>
...
data: {
    flag: true
}