当前位置：首页 > VUE

vue怎么实现隐藏效果

2026-02-22 01:45:17VUE

Vue 实现隐藏效果的方法

v-show 指令

使用 v-show 指令可以控制元素的显示与隐藏，通过布尔值切换 CSS 的 display 属性。适合频繁切换的场景，因为元素始终保留在 DOM 中。

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

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

v-if 指令

v-if 根据条件动态添加或移除 DOM 元素。适合不频繁切换的场景，因为元素会被完全销毁或重建。

vue怎么实现隐藏效果

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

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

动态绑定 class

通过绑定 class 或 style 实现隐藏效果，适用于需要复杂样式控制的场景。

vue怎么实现隐藏效果

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

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

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

动态绑定 style

直接通过内联样式控制 display 属性。

<template>
  <div :style="{ display: isVisible ? 'block' : 'none' }">内容</div>
</template>

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

过渡动画

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

<template>
  <transition name="fade">
    <div v-if="isVisible">内容</div>
  </transition>
</template>

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

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