当前位置：首页 > VUE

vue实现显示隐藏功能

2026-02-22 20:02:52VUE

使用 v-show 指令

v-show 是 Vue 提供的指令，通过切换元素的 display CSS 属性来控制显示和隐藏。适用于频繁切换显示状态的场景。

<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 元素。适用于不频繁切换且可能影响性能的场景。

<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

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

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

使用计算属性

结合计算属性实现更复杂的显示逻辑，适用于需要根据多个条件判断显示状态的场景。

<template>
  <div>
    <button @click="toggleVisibility">切换显示</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: {
    toggleVisibility() {
      this.isVisible = !this.isVisible
    }
  }
}
</script>

组件间通信实现

在父组件中控制子组件的显示隐藏，适用于组件化开发的场景。

<!-- 父组件 -->
<template>
  <div>
    <button @click="toggleChild">切换子组件</button>
    <ChildComponent v-if="showChild" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      showChild: true
    }
  },
  methods: {
    toggleChild() {
      this.showChild = !this.showChild
    }
  }
}
</script>

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>子组件内容</div>
</template>

vue实现显示隐藏功能