当前位置：首页 > VUE

vue实现切换隐藏

2026-02-10 22:32:04VUE

使用 `v-if` 或 `v-show` 指令

Vue 提供了 v-if 和 v-show 指令来实现元素的动态显示与隐藏。

v-if：通过条件判断是否渲染 DOM 元素，适用于切换频率较低的场景。

vue实现切换隐藏

<template>
  <div>
    <button @click="toggleVisibility">切换显示</button>
    <div v-if="isVisible">内容区域</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

v-show：通过 CSS 的 display: none 控制显示与隐藏，适用于频繁切换的场景。

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

动态绑定类名

通过 :class 绑定 CSS 类，控制元素的显示与隐藏。

vue实现切换隐藏

<template>
  <div>
    <button @click="toggleVisibility">切换显示</button>
    <div :class="{ 'hidden': !isVisible }">内容区域</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>
<style>
.hidden {
  display: none;
}
</style>

结合过渡动画

使用 Vue 的 <transition> 组件实现平滑的显示/隐藏过渡效果。

<template>
  <div>
    <button @click="toggleVisibility">切换显示</button>
    <transition name="fade">
      <div v-if="isVisible">内容区域</div>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

使用计算属性

通过计算属性动态控制显示逻辑，适用于复杂条件判断。

<template>
  <div>
    <button @click="toggleVisibility">切换显示</button>
    <div v-if="shouldShow">内容区域</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isVisible: true,
      forceHide: false
    };
  },
  computed: {
    shouldShow() {
      return this.isVisible && !this.forceHide;
    }
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>