当前位置：首页 > VUE

vue 实现toogle效果

2026-01-17 09:49:33VUE

使用 `v-if` 和 `v-else` 实现切换

通过 Vue 的指令 v-if 和 v-else 可以轻松实现元素的显示与隐藏切换。

<template>
  <button @click="toggle">Toggle</button>
  <div v-if="isVisible">显示的内容</div>
  <div v-else>隐藏的内容</div>
</template>

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

使用 `v-show` 切换可见性

v-show 通过 CSS 的 display 属性控制元素是否可见，适合频繁切换的场景。

<template>
  <button @click="toggle">Toggle</button>
  <div v-show="isVisible">显示的内容</div>
</template>

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

使用计算属性切换多个状态

如果需要切换多个状态，可以结合计算属性实现更复杂的逻辑。

<template>
  <button @click="nextState">Toggle State</button>
  <div v-if="currentState === 'A'">状态 A</div>
  <div v-else-if="currentState === 'B'">状态 B</div>
  <div v-else>状态 C</div>
</template>

<script>
export default {
  data() {
    return {
      states: ['A', 'B', 'C'],
      currentIndex: 0,
    };
  },
  computed: {
    currentState() {
      return this.states[this.currentIndex];
    },
  },
  methods: {
    nextState() {
      this.currentIndex = (this.currentIndex + 1) % this.states.length;
    },
  },
};
</script>

使用动态组件切换

Vue 的 <component> 可以动态渲染不同的组件，适合切换不同视图。

<template>
  <button @click="toggleComponent">Toggle Component</button>
  <component :is="currentComponent" />
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      components: [ComponentA, ComponentB],
      currentIndex: 0,
    };
  },
  computed: {
    currentComponent() {
      return this.components[this.currentIndex];
    },
  },
  methods: {
    toggleComponent() {
      this.currentIndex = (this.currentIndex + 1) % this.components.length;
    },
  },
};
</script>

使用 CSS 过渡动画增强效果

结合 Vue 的 <transition> 组件，可以为切换效果添加平滑的动画。

vue 实现toogle效果

<template>
  <button @click="toggle">Toggle with Animation</button>
  <transition name="fade">
    <div v-if="isVisible">渐变显示的内容</div>
  </transition>
</template>

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

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