vue怎么实现toggle

实现 Vue 的 toggle 功能

在 Vue 中实现 toggle（切换）功能通常涉及使用 v-model 或 v-show/v-if 结合事件处理。以下是几种常见方法：

使用 v-model 绑定布尔值

通过 v-model 绑定一个布尔值，配合按钮点击事件切换状态：

<template>
  <button @click="isActive = !isActive">
    Toggle (当前状态: {{ isActive ? '开' : '关' }})
  </button>
  <p v-if="isActive">内容显示</p>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  }
}
</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="counter++">Toggle (点击次数: {{ counter }})</button>
  <p>{{ statusText }}</p>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },
  computed: {
    statusText() {
      return this.counter % 2 === 0 ? '偶数次' : '奇数次'
    }
  }
}
</script>

组件间 toggle

父子组件间通过 props 和 $emit 实现状态同步：

<!-- 父组件 -->
<template>
  <ChildComponent :is-on="isOn" @toggle="isOn = $event" />
</template>

<script>
export default {
  data() {
    return {
      isOn: false
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="$emit('toggle', !isOn)">
    {{ isOn ? '关闭' : '开启' }}
  </button>
</template>

<script>
export default {
  props: ['isOn']
}
</script>

使用 Vuex 管理状态

对于全局状态，可通过 Vuex 存储和修改 toggle 状态：

// store.js
const store = new Vuex.Store({
  state: {
    featureEnabled: false
  },
  mutations: {
    toggleFeature(state) {
      state.featureEnabled = !state.featureEnabled
    }
  }
})

<template>
  <button @click="$store.commit('toggleFeature')">
    {{ $store.state.featureEnabled ? '禁用' : '启用' }}功能
  </button>
</template>

选择方法时应考虑：

• 局部状态用 data + 事件
• 组件通信用 props/emit
• 全局状态用 Vuex/Pinia
• 频繁切换用 v-show，否则用 v-if