v-show与v-if的区别

原创于 2022-11-21 23:01:59 发布 · 120 阅读

CC 4.0 BY-SA版权

文章标签：

41 篇文章

订阅专栏

本文探讨了Vue.js中v-if与v-show指令的区别。当条件为false时，v-if会将元素从DOM中移除，而v-show则通过设置display:none保留元素。当条件变为true时，v-if会重新创建元素，而v-show则解除隐藏。

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

<div id="app">
  <h1 v-if="isShow" id="aaa">显示文本</h1>
  <h1 v-show="isShow" id="bbb">显示文本</h1>
</div>

当true时都正常渲染

当false时，只有v-show所在的标签，v-if所在的标签删除了，根本不存在于dom中

当修改为true时，v-if所在标签重新创建

v-show的标题增加了display：none样式