当前位置：首页 > VUE

vue点击实现显示隐藏

2026-02-21 23:43:29VUE

实现点击显示/隐藏的Vue方法

使用v-if指令 通过绑定布尔值控制元素的显示与隐藏，适合需要频繁切换的场景。

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

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

使用v-show指令 与v-if不同，v-show通过CSS的display属性控制，适合需要频繁切换但不需要销毁DOM的场景。

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

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

动态切换组件 通过动态组件实现更复杂的显示隐藏逻辑，适合需要切换不同组件的场景。

<template>
  <button @click="currentComponent = currentComponent === 'A' ? 'B' : 'A'">
    切换组件
  </button>
  <component :is="currentComponent"/>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'A'
    }
  },
  components: {
    A: { template: '<div>组件A</div>' },
    B: { template: '<div>组件B</div>' }
  }
}
</script>

过渡动画效果 结合transition组件实现平滑的显示隐藏动画效果。

vue点击实现显示隐藏

<template>
  <button @click="isVisible = !isVisible">带动画切换</button>
  <transition name="fade">
    <div v-if="isVisible">渐显内容</div>
  </transition>
</template>

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

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