Vue v-if和v-show的区别

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

原创最新推荐文章于 2025-07-06 22:36:32 发布 · 507 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#v-show #v-if #vue

Vue 专栏收录该内容

27 篇文章

订阅专栏

本文深入探讨了Vue.js中v-if与v-show指令的区别及使用场景。v-if用于动态添加或删除DOM元素，适用于较少改变的条件判断；v-show则通过修改DOM元素的display属性来控制显示与隐藏，适合频繁切换的场景。文章还提供了代码示例，帮助读者理解如何在实际项目中合理选择这两个指令。

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

使用v-if和v-else或v-else-if之间不能添加其他元素。

<p v-if="type==1">正确示范</p>
<p v-else>索隆</p>

v-else 元必须紧跟在带 v-if或者v-else-if 后面

<p v-if="type==1">错误示范</p>
<p>路飞</p>
<p v-else>索隆</p>

如果两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可

<template v-if="type=== 'username'" key="1">  
  <label>账号</label>  
  <input placeholder="输入账号">  
</template>  
<template v-else  key="2">  
  <label>密码</label>  
  <input placeholder="输入密码">  
</template>

v-show

<h1 v-show="show">Hello!</h1> //不显示
<h1 v-show="hien">Hello!</h1> //显示

 data() {
    return {
      hien:true,
      show: false,
    };
  },

相同点：都可以动态操作dom元素的显示隐藏

不同点：

1.v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；

2.v-if适合不经常改变环境；v-show适合频繁切换；

3.v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（渲染），　v-show是在任何条件下（首次条件是否为真）都被编译（渲染），然后被缓存，而且DOM元素保留；

说明：v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。