vue实现动态隐藏

Vue 动态隐藏的实现方法

使用 v-show 指令

v-show 通过控制 CSS 的 display 属性实现隐藏，适合频繁切换的场景：

<div v-show="isVisible">内容</div>

data() {
  return {
    isVisible: true // 初始显示
  }
}

优点：DOM 始终存在，仅切换显示状态，性能较好。

使用 v-if 指令

v-if 通过条件渲染控制元素是否存在，适合不频繁切换的场景：

<div v-if="isVisible">内容</div>

data() {
  return {
    isVisible: true // 初始渲染
  }
}

区别：v-if 会销毁/重建 DOM，适合初始化开销大的组件。

动态绑定 class

通过对象语法动态切换类名实现隐藏效果：

<div :class="{ 'hidden-class': isHidden }">内容</div>

.hidden-class {
  display: none;
}

data() {
  return {
    isHidden: false
  }
}

适用场景：需要复杂 CSS 过渡效果时。

结合计算属性

当隐藏逻辑较复杂时，可使用计算属性：

<div v-show="shouldHide">内容</div>

computed: {
  shouldHide() {
    return this.items.length === 0 || this.isLoading
  }
}

动画过渡

添加 Vue 的过渡效果使隐藏更平滑：

<transition name="fade">
  <div v-show="isVisible">带过渡的内容</div>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

动态组件切换

对于组件级别的隐藏，可使用 <component>：

<component :is="currentComponent" v-show="isActive"/>

注意事项

1. v-show 不支持 <template> 标签
2. v-if 可配合 v-else 实现条件分支
3. 移动端优化时，考虑使用 will-change: opacity 提升性能
4. 服务器渲染 (SSR) 场景下，v-show 的初始状态需与客户端一致