当前位置：首页 > VUE

vue中实现显示和隐藏

2026-03-06 19:18:13VUE

使用 v-if 指令

v-if 指令根据表达式的真假值来条件性地渲染元素。当表达式为 true 时，元素会被渲染到 DOM 中；当表达式为 false 时，元素会从 DOM 中移除。

vue中实现显示和隐藏

<template>
  <div>
    <button @click="toggleVisibility">Toggle</button>
    <p v-if="isVisible">This element is visible</p>
  </div>
</template>

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

使用 v-show 指令

v-show 指令通过切换元素的 display CSS 属性来控制显示和隐藏。与 v-if 不同，v-show 不会从 DOM 中移除元素，只是修改其样式。

vue中实现显示和隐藏

<template>
  <div>
    <button @click="toggleVisibility">Toggle</button>
    <p v-show="isVisible">This element is visible</p>
  </div>
</template>

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

动态绑定 class 或 style

可以通过动态绑定 class 或 style 属性来实现显示和隐藏效果，这种方式更加灵活，可以自定义各种显示隐藏的动画效果。

<template>
  <div>
    <button @click="toggleVisibility">Toggle</button>
    <p :class="{ 'hidden': !isVisible }">This element is visible</p>
  </div>
</template>

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

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

使用 transition 组件

Vue 提供了 transition 组件来实现元素显示和隐藏时的过渡动画效果。

<template>
  <div>
    <button @click="toggleVisibility">Toggle</button>
    <transition name="fade">
      <p v-if="isVisible">This element has fade animation</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false
    }
  },
  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>