当前位置：首页 > VUE

vue点击实现显示隐藏

2026-01-21 08:16:05VUE

使用 v-show 指令

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

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

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

使用 v-if 指令

v-if 指令会动态添加或移除 DOM 元素。适合条件变化较少的场景，因为涉及 DOM 操作。

<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>

动态绑定 class 或 style

通过绑定 class 或 style 实现更灵活的显示隐藏控制，例如添加 display: none。

<template>
  <div>
    <button @click="toggleVisibility">切换显示</button>
    <div :style="{ display: isVisible ? 'block' : 'none' }">内容区域</div>
  </div>
</template>

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

结合过渡效果

使用 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>

vue点击实现显示隐藏