vue 切换按钮

Vue 的切换按钮可以使用 `v-model` 和 `@click` 指令来实现。以下是一个简单的例子：

<template>
  <div>
    <button @click="toggleSwitch">{{ switchOn ? '关闭' : '打开' }}</button>
  </div>
</template>

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

在上面的例子中，我们使用 `switchOn` 数据属性来控制开关的状态，并在按钮的 `@click` 事件中调用 `toggleSwitch` 方法来切换状态。按钮的文本内容根据 `switchOn` 的值动态改变。

我们还可以使用 `v-model` 指令来绑定开关的值，这样可以更方便地在父组件中控制开关的状态。以下是一个使用 `v-model` 的例子：

<template>
  <div>
    <Switch v-model="switchOn" />
  </div>
</template>

<script>
import Switch from './Switch.vue'

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

在上面的例子中，我们将开关封装为一个组件 `Switch`，在父组件中使用 `v-model` 绑定 `switchOn` 的值。在 `Switch` 组件中，我们需要使用 `this.$emit('input', newValue)` 来触发父组件的 `input` 事件，从而更新 `switchOn` 的值。