vue实现toggle功能

Vue 实现 Toggle 功能

在 Vue 中实现 Toggle 功能可以通过多种方式完成，以下是一些常见的方法：

使用 v-model 和 computed 属性

<template>
  <button @click="toggleValue">Toggle</button>
  <p>Current State: {{ isActive }}</p>
</template>

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

使用 v-model 和 v-if 指令

<template>
  <button @click="toggleShow">Toggle Content</button>
  <div v-if="showContent">This content is toggled</div>
</template>

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

使用 Vuex 管理状态

对于大型应用，可以使用 Vuex 来管理 toggle 状态：

// store.js
export default new Vuex.Store({
  state: {
    isToggled: false
  },
  mutations: {
    toggle(state) {
      state.isToggled = !state.isToggled
    }
  }
})

<template>
  <button @click="$store.commit('toggle')">Toggle</button>
  <p>State from Vuex: {{ $store.state.isToggled }}</p>
</template>

使用 Composition API (Vue 3)

在 Vue 3 中，可以使用 Composition API 实现：

<template>
  <button @click="toggle">Toggle</button>
  <p>Current State: {{ state.value }}</p>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      value: false
    })

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

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

使用 CSS 类切换

还可以结合 CSS 类来实现视觉切换效果：

<template>
  <button @click="toggleClass">Toggle Class</button>
  <div :class="{ 'active': isActive }">This div changes class</div>
</template>

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

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

这些方法可以根据具体需求选择使用，从简单的数据绑定到复杂的状态管理，Vue 提供了灵活的选项来实现 toggle 功能。