当前位置：首页 > VUE

vue 实现toogle效果

2026-03-09 15:08:16VUE

Vue 实现 Toggle 效果

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

使用 v-model 绑定

通过 v-model 绑定一个布尔值来控制 toggle 状态，结合 v-on:click 或 v-on:change 事件触发状态切换。

<template>
  <div>
    <button @click="toggle = !toggle">
      {{ toggle ? 'ON' : 'OFF' }}
    </button>
    <p>当前状态: {{ toggle ? '开启' : '关闭' }}</p>
  </div>
</template>

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

使用计算属性

通过计算属性动态返回 toggle 状态，适合需要复杂逻辑的场景。

<template>
  <div>
    <input type="checkbox" v-model="isChecked" />
    <span>{{ statusText }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    }
  },
  computed: {
    statusText() {
      return this.isChecked ? '已启用' : '已禁用'
    }
  }
}
</script>

使用自定义组件

封装一个可复用的 Toggle 组件，支持更多自定义功能。

<template>
  <div class="toggle-wrapper" @click="toggle">
    <div class="toggle-button" :class="{ active: isActive }"></div>
  </div>
</template>

<script>
export default {
  props: {
    value: Boolean
  },
  computed: {
    isActive() {
      return this.value
    }
  },
  methods: {
    toggle() {
      this.$emit('input', !this.value)
    }
  }
}
</script>

<style>
.toggle-wrapper {
  width: 50px;
  height: 24px;
  background: #ccc;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
}
.toggle-button {
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.2s;
}
.toggle-button.active {
  left: 28px;
  background: #4CAF50;
}
</style>

使用第三方库

如果需要更丰富的功能，可以使用第三方库如 vue-js-toggle-button。

安装库：

npm install vue-js-toggle-button

使用示例：

vue 实现toogle效果

<template>
  <toggle-button v-model="toggleValue"/>
</template>

<script>
import { ToggleButton } from 'vue-js-toggle-button'

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

以上方法可以根据具体需求选择，简单的状态切换可以直接使用 v-model，复杂场景建议封装组件或使用第三方库。