Vue.js 条件渲染：v-show 指令的 display 控制与实践中的三目运算符用法

脚本专家

在 Vue.js 开发中，v-show 是常用的条件渲染指令之一。它与 v-if 类似，但实现机制和使用场景有本质区别。本文结合代码示例，详细讲解 v-show 的工作原理、与 v-if 的对比，以及在实际项目中的常见用法。

一、v-show 的基本用法
v-show 通过修改目标元素的 CSS 属性 display 来决定元素显示或隐藏。当表达式结果为真时元素正常显示，为假时 display 设置为 none 隐藏。

示例：

2. <div id="app">
3.   <p v-show="type === '科技'">大数据之下的锦鲤：为什么你的微博总抽不到奖</p>
4. </div>
6. <script>
7. new Vue({
8.   el: '#app',
9.   data: {
10.     type: '技术'
11.   }
12. });
13. </script>

复制代码

渲染后，因为 type 值不等于 '科技'，所以 p 标签实际呈现为：

2. <p style="display: none;">大数据之下的锦鲤：为什么你的微博总抽不到奖</p>

复制代码

元素仍然存在于 DOM 中，仅仅通过 display: none 隐藏。

二、v-show 与 v-if 的主要区别
v-if 是“真正”的条件渲染，它会根据表达式销毁或重建元素及事件监听器。而 v-show 始终保留元素，只切换 CSS 的 display 属性。

性能对比：
- v-if 有更高的切换开销，因为每次条件变化时都要创建或销毁 DOM 节点。
- v-show 有更高的初始渲染开销（即使隐藏也会渲染），但切换开销极低。

适用场景：
- 条件运行时很少改变（如页面初始化后的权限判断）→ 使用 v-if 更优，节省首次渲染资源。
- 条件频繁切换（如选项卡、折叠面板、下拉菜单）→ 使用 v-show 更优，避免频繁 DOM 重建。

三、实战用法：权限控制与三目运算符
在实际项目中，v-show 常用于按钮显示控制。例如，通过接口返回的权限参数（如 list.power）决定“去上传”按钮是否可见：

2. <el-button v-show="list.power == 1" @click="toUpload" class="toUpload" type="primary">
3.   去上传<i class="el-icon-upload el-icon--right"></i>
4. </el-button>

复制代码

当 list.power 等于 1 时按钮显示，否则隐藏。

有时需要根据更复杂的条件判断，可以使用三目运算符包裹表达式。例如，一个链接的 v-show 条件为：当 item.ai 不为 null 时显示，否则隐藏：

2. <a class="warn" v-show="true ? item.ai != null : item.ai == null"
3.    :href="'http://example.com/download?url='+item.urlai"
4.    rel="external nofollow">AI</a>

复制代码

该三目运算符本质上是冗余的，可以直接简化为：

2. <a class="warn" v-show="!item.ai == null"
3.    :href="'http://example.com/download?url='+item.urlai"
4.    rel="external nofollow">AI</a>

复制代码

注意：v-show 本身不支持逻辑非运算符（!）直接作用于对象属性比较？实际上 !item.ai == null 等价于 (item.ai != null)，因为 !item.ai 如果 item.ai 为 null 则 !null 为 true，但 true == null 为 false，所以原意是 item.ai != null。更准确的写法是 v-show="item.ai != null"。但原文示例保留了，读者可自行简化。

四、总结
v-show 通过 display 无痕控制元素的显示隐藏，适合条件频繁变化的场景；v-if 则更适合运行时稳定的条件。掌握两者的区别和适用边界，能有效提升 Vue 应用的渲染性能。

热心网友7

感谢楼主的详细分享！关于 v-show 和 v-if 的区别总结得很清晰，尤其是适用场景的对比，对新手很有帮助。 不过想请教一下，您在第三部分提到的 `!item.ai == null` 写法，我理解您已经指出了它等价于 `item.ai != null`，但实际测试中 `!item.ai == null` 在 JavaScript 里会因为运算符优先级先执行 `!item.ai` 再与 `null` 比较，比如当 `item.ai` 为 `0` 或空字符串时也会导致意外结果。所以更推荐直接写 `item.ai != null`，既直观又安全。不知道楼主在实际项目中是否遇到过因为这类写法导致的 bug？ 另外，v-show 在组件上使用时需要注意：如果组件有 `v-show` 且外部有 `display` 样式覆盖，可能会被干扰，建议配合 `visible` 属性或自定义指令处理。这点楼主是否有经验分享？