Web前端之隐藏元素方式的区别、Vue循环标签的时候在同一标签上隐藏元素的解决办法、hidden、display、visibility

MENU

• 标签
• 区别速览
• 详解
• • [✅ v-if](#✅ v-if)
  • [✅ v-show](#✅ v-show)
  • [✅ :style="{ display: ... }"](#✅ :style="{ display: ... }")
  • [⚠️ :hidden](#⚠️ :hidden)
  • [⚠️ :style="{ visibility: ... }"](#⚠️ :style="{ visibility: ... }")
• 总结

---

标签

<div v-for="item in list" v-if="item.isShow">{{item.name}}</div>
<div v-for="item in list" v-show="item.isShow">{{item.name}}</div>
<div v-for="item in list" :style="{ display: item.isShow? '' : 'none' }">{{item.name}}</div>
<div v-for="item in list" :hidden="!item.isShow">{{item.name}}</div>
<div v-for="item in list" :style="{ visibility: item.isShow? 'visible' : 'hidden' }">{{item.name}}</div>

---

区别速览

序号	写法	渲染到DOM	占位	响应性	性能	推荐指数	说明
1	v-if	❌ 不渲染	❌ 不占位	高（增删）	低（频繁销毁/重建）	⚠️ 低	每个item.isShow=false的元素根本不会出现在DOM中，适合频繁切换不推荐
2	v-show	✅ 渲染	❌ 不占位	高	高（仅切换 CSS）	✅ 高	DOM始终存在，只是通过display: none切换，可用于频繁切换可见性
3	:style="display"	✅ 渲染	❌ 不占位	高	高	✅ 高	和v-show本质一致，更灵活（可配合过渡/动画）
4	:hidden	✅ 渲染	❌ 不占位（某些浏览器）	中（兼容性一般）	高	⚠️ 中	HTML原生hidden属性，有兼容性差异（如 IE），不推荐用于复杂布局
5	:style="visibility"	✅ 渲染	✅ 占位	高	高	⚠️ 中偏低	元素不可见但仍然占空间，适合需要保留布局占位但不显示内容的场景

---

详解

✅ v-if

<div v-for="item in list" v-if="item.isShow">{{item.name}}</div>

逻辑层判断：如果isShow=false，就不渲染该DOM元素。
Vue编译优化：Vue在每次更新时会销毁/创建DOM节点。
性能影响：对于频繁切换的列表，v-if性能较差（会频繁插入/删除DOM）。
作用域问题：v-if的判断发生在v-for外层，Vue官方建议避免同标签同时使用v-if与v-for，会导致作用域错乱（应放在<template>上）。
✅适合：只渲染一次或很少改变显示状态的内容（如首次加载/权限判断）

---

✅ v-show

<div v-for="item in list" v-show="item.isShow">{{item.name}}</div>

DOM元素始终存在；
Vue只是动态加上或移除display: none；
更新快，性能好。
✅适合：需要频繁切换显示状态的场景（如切换tab、展开折叠）

---

✅ :style="{ display: ... }"

<div v-for="item in list" :style="{ display: item.isShow ? '' : 'none' }">{{item.name}}</div>

与v-show类似，控制的是CSS显示状态；
更灵活，可绑定多个样式，也可使用动画库或写自定义transition；
适合在v-for这种循环内做粒度更细的控制。
✅推荐用法，兼顾灵活性与性能

---

⚠️ :hidden

<div v-for="item in list" :hidden="!item.isShow">{{item.name}}</div>

控制HTML的hidden属性（布尔值）；
行为接近display: none；
某些老浏览器（如IE、旧版Edge）对hidden支持不好；
不能做动画，CSS控制也较差。
⚠️不推荐在复杂布局中使用，简单项目可用

---

⚠️ :style="{ visibility: ... }"

<div v-for="item in list" :style="{ visibility: item.isShow ? 'visible' : 'hidden' }">{{item.name}}</div>

DOM始终存在；
元素隐藏但仍然占据空间（对布局有影响）；
可以搭配opacity做过渡动画。
✅适合：希望"保留位置"但临时不显示的内容
例如：横向滚动条下的轮播项、等高栅格系统。

---

总结

场景	推荐方式
静态控制显示，页面首次加载是否渲染	v-if
频繁切换可见性（如 tab 切换）	v-show或:style="display"
需要控制多个样式或结合动画	:style更灵活
只想快速隐藏并支持原生 hidden 属性	:hidden（轻量项目可用）
需要隐藏但保留占位	visibility: hidden

如果在表格、网格、动态列表等复杂场景中使用，推荐优先考虑：
1、:style="{ display: item.isShow ? '' : 'none' }" 通用又安全
2、或v-show（只在v-for的子元素中使用）