vue 实现toogle效果

Vue 实现 Toggle 效果的方法

方法一：使用 v-model 绑定布尔值

通过 v-model 绑定一个布尔值，控制元素的显示与隐藏。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div v-if="isVisible">Toggle 内容</div>
  </div>
</template>

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

方法二：使用计算属性

通过计算属性动态返回一个布尔值，实现更复杂的逻辑。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div v-if="isVisible">Toggle 内容</div>
  </div>
</template>

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

方法三：使用动态样式

通过动态绑定 class 或 style，实现样式的切换。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div :class="{ 'active': isActive }">Toggle 内容</div>
  </div>
</template>

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

<style>
.active {
  display: block;
}
</style>

方法四：使用 Vue Transition

结合 Vue 的 transition 组件，实现平滑的过渡效果。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="fade">
      <div v-if="isVisible">Toggle 内容</div>
    </transition>
  </div>
</template>

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

方法五：使用第三方库

如果需要更复杂的功能，可以使用第三方库如 vue-toggle。

<template>
  <div>
    <vue-toggle v-model="isVisible" />
    <div v-if="isVisible">Toggle 内容</div>
  </div>
</template>

<script>
import VueToggle from 'vue-toggle'

export default {
  components: {
    VueToggle
  },
  data() {
    return {
      isVisible: false
    }
  }
}
</script>

以上方法可以根据实际需求选择使用，每种方法都有其适用的场景。