Vue指令之v-show篇

最新推荐文章于 2026-07-15 11:58:12 发布

原创最新推荐文章于 2026-07-15 11:58:12 发布 · 10w+ 阅读

37 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue

本文深入探讨Vue中v-show与v-if指令的区别，解析两者在条件为false时的处理方式，v-show使元素display属性为none，而v-if则不生成元素。

扯到v-show就不得不说说他老人家和v-if 的藕断丝连了

我先试着扯一扯：

v-if 呢如果条件为false，那么在生成的HTML语句中，条件为false的标签不会生成在代码中

例如：

代码：

运行后：

浏览器输出：

有没有发现，<h1 v-if="error">Error!</h1>这部分在运行后没有生成

v-show呢如果条件为false，运行后，还是生成了条件为false所在的标签，但是只是让其display属性为none，即该标签不进行显示，看下面的代码:

代码：

运行后：

浏览器输出：

发现没，运行后的代码中有<h1 style="display: none;">Error!</h1>，就是说Erroe!所在的标签还是生成了代码，只是没有进行显示而已，而v-if 如果条件为false，就直接不生成代码，两者之间有本质的区别。

-----------------------------------------------------------------------------------------------------

看完上面的东西，你应该知道v-show是干啥的了，没错他也是根据条件来展示元素的，和v-if的功能类似，他们之间的却别已经在上面说的好像清楚了

具体再来看看v-show

上代码：

<html>
<head>
<meta charset="utf-8">
<title>v-show指令学习</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <h1 v-show="ok">Hello!</h1>  //条件为TRUE，输出
    <h1 v-show="error">false!</h1>  //条件为false，不输出
    <h1 v-show="10>5">10大于5，输出!</h1>   //条件为TRUE，输出
    <h1 v-show="2>10">不大于10，不输出!</h1>   //条件为false，不输出
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    error: false
  }
})
</script>
</body>
</html>

输出：