vue 实现toggle效果

Vue 实现 Toggle 效果

在 Vue 中实现 toggle（切换）效果可以通过多种方式完成，以下是几种常见的方法：

使用 v-model 和 v-show/v-if

通过绑定一个布尔值数据属性，结合 v-show 或 v-if 指令实现切换显示隐藏的效果。

<template>
  <div>
    <button @click="toggleVisibility">Toggle</button>
    <div v-show="isVisible">Content to toggle</div>
  </div>
</template>

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

使用 v-model 和动态 class

通过动态绑定 class 或 style 来实现切换样式效果。

<template>
  <div>
    <button @click="toggleActive">Toggle Class</button>
    <div :class="{ active: isActive }">Content with toggle class</div>
  </div>
</template>

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

<style>
.active {
  background-color: yellow;
}
</style>

使用 Vue 3 Composition API

在 Vue 3 中，可以使用 Composition API 的 ref 来实现 toggle 效果。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div v-show="isVisible">Content to toggle</div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const isVisible = ref(false)

    const toggle = () => {
      isVisible.value = !isVisible.value
    }

    return {
      isVisible,
      toggle
    }
  }
}
</script>

使用 Vue 的 Transition 实现动画效果

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

<template>
  <div>
    <button @click="toggleVisibility">Toggle with Animation</button>
    <transition name="fade">
      <div v-show="isVisible">Content with fade effect</div>
    </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>

使用第三方库（如 VueUse）

VueUse 提供了 useToggle 工具函数，可以简化 toggle 逻辑。

<template>
  <div>
    <button @click="toggle()">Toggle with VueUse</button>
    <div v-show="state">Content to toggle</div>
  </div>
</template>

<script>
import { useToggle } from '@vueuse/core'

export default {
  setup() {
    const [state, toggle] = useToggle(false)

    return {
      state,
      toggle
    }
  }
}
</script>

以上方法可以根据具体需求选择适合的实现方式。