当前位置：首页 > VUE

vue实现动态隐藏

2026-02-11 07:36:45VUE

Vue 实现动态隐藏的方法

使用 v-show 指令

v-show 通过控制元素的 display CSS 属性实现隐藏/显示，适合频繁切换的场景。元素始终保留在 DOM 中，仅改变可见性。

<template>
  <div v-show="isVisible">内容</div>
  <button @click="toggleVisibility">切换显示</button>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible
    }
  }
}
</script>

使用 v-if 指令

v-if 会完全销毁/重建 DOM 元素，适合不频繁切换或需要条件渲染的场景。当条件为 false 时元素不存在于 DOM 中。

<template>
  <div v-if="shouldRender">条件渲染内容</div>
</template>

<script>
export default {
  data() {
    return {
      shouldRender: true
    }
  }
}
</script>

动态 class 绑定

通过对象语法或数组语法动态切换 class，结合 CSS 实现隐藏效果。

<template>
  <div :class="{ 'hidden': isHidden }">可隐藏内容</div>
</template>

<style>
.hidden {
  display: none;
}
</style>

<script>
export default {
  data() {
    return {
      isHidden: false
    }
  }
}
</script>

动态 style 绑定

直接通过行内样式控制显示状态。

<template>
  <div :style="{ display: showElement ? 'block' : 'none' }">动态样式内容</div>
</template>

<script>
export default {
  data() {
    return {
      showElement: true
    }
  }
}
</script>

组件级别的动态隐藏

对于需要隐藏整个组件的情况，可以在父组件中控制子组件的渲染。

<template>
  <child-component v-if="showChild" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      showChild: true
    }
  }
}
</script>

动画过渡隐藏

结合 transition 组件实现带动画效果的隐藏/显示。

<template>
  <transition name="fade">
    <div v-if="show">会淡入淡出的内容</div>
  </transition>
</template>

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

路由级别的隐藏

通过路由守卫控制页面级别的显示/隐藏。

// router.js
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})