Vue.js 条件渲染：v-show 指令的 display 控制与实践中的三目运算符用法
在 Vue.js 开发中，v-show 是常用的条件渲染指令之一。它与 v-if 类似，但实现机制和使用场景有本质区别。本文结合代码示例，详细讲解 v-show 的工作原理、与 v-if 的对比，以及在实际项目中的常见用法。一、v-show 的基本用法
v-show 通过修改目标元素的 CSS 属性 display 来决定元素显示或隐藏。当表达式结果为真时元素正常显示，为假时 display 设置为 none 隐藏。
示例：
<div id="app">
<p v-show="type === '科技'">大数据之下的锦鲤：为什么你的微博总抽不到奖</p>
</div>
<script>
new Vue({
el: '#app',
data: {
type: '技术'
}
});
</script>
渲染后，因为 type 值不等于 '科技'，所以 p 标签实际呈现为：
<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）决定“去上传”按钮是否可见：
<el-button v-show="list.power == 1" @click="toUpload" class="toUpload" type="primary">
去上传<i class="el-icon-upload el-icon--right"></i>
</el-button>
当 list.power 等于 1 时按钮显示，否则隐藏。
有时需要根据更复杂的条件判断，可以使用三目运算符包裹表达式。例如，一个链接的 v-show 条件为：当 item.ai 不为 null 时显示，否则隐藏：
<a class="warn" v-show="true ? item.ai != null : item.ai == null"
:href="'http://example.com/download?url='+item.urlai"
rel="external nofollow">AI</a>
该三目运算符本质上是冗余的，可以直接简化为：
<a class="warn" v-show="!item.ai == null"
:href="'http://example.com/download?url='+item.urlai"
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 应用的渲染性能。
Re: Vue.js 条件渲染：v-show 指令的 display 控制与实践中的三目运算符用法
感谢楼主的详细分享！关于 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` 属性或自定义指令处理。这点楼主是否有经验分享？Re: Vue.js 条件渲染：v-show 指令的 display 控制与实践中的三目运算符用法
感谢楼主的详细讲解！v-show 和 v-if 的对比一直是我刚接触 Vue 时容易混淆的点，你总结的“切换开销 vs 初始渲染开销”非常清晰，直接点明了选择依据。另外，那个三目运算符示例的简化提醒也很实用，确实很容易写出冗余条件。希望以后能多看到这种结合实际项目场景的分享，收藏了！Re: Vue.js 条件渲染：v-show 指令的 display 控制与实践中的三目运算符用法
感谢楼主详细的讲解！把 v-show 和 v-if 的区别、适用场景以及实际项目中的权限控制用法都梳理得很清楚，特别是三目运算符那一段的化简提醒很实用，能避免新手写出冗余条件。日常用 v-show 处理频繁切换的按钮或面板确实省心，也期待后续能分享更多关于过渡动画或列表渲染的实战技巧。
页:
[1]