当前位置：首页 > VUE

vue实现元素显示隐藏

2026-01-22 23:29:53VUE

使用 v-show 指令

通过 v-show 指令可以控制元素的显示与隐藏，本质是通过 CSS 的 display 属性切换。适合频繁切换显示状态的场景。

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

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

使用 v-if 指令

v-if 会根据条件动态添加或移除 DOM 元素。适合不频繁切换且需要条件渲染的场景。

vue实现元素显示隐藏

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

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

动态绑定 class 或 style

通过动态绑定 class 或 style 来控制元素的显示隐藏，适合需要更复杂样式控制的场景。

vue实现元素显示隐藏

<template>
  <div>
    <button @click="toggle">切换显示</button>
    <div :class="{ 'hidden': !isVisible }">内容区域</div>
  </div>
</template>

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

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

使用 transition 动画

结合 Vue 的 <transition> 组件实现显示隐藏的过渡动画。

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

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  },
  methods: {
    toggle() {
      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="toggle">切换显示</button>
    <div v-if="shouldShow">内容区域</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
      otherCondition: true
    }
  },
  computed: {
    shouldShow() {
      return this.isVisible && this.otherCondition
    }
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible
    }
  }
}
</script>