vue2 switch 采用 state

Vue2中的switch主要是通过state（状态）来实现的。

在Vue2中，我们可以通过在data选项中定义一个初始的state（状态）来实现switch功能。state可以是一个简单的变量，也可以是一个对象，根据实际需求来确定。

首先，我们在data选项中定义一个名为state的变量，代表switch的状态。例如：

data() {
  return {
    state: false // 初始状态为关闭
  }
}

然后，在模板中使用该state来控制switch的状态。我们可以使用v-bind指令将state绑定到switch上的属性，例如checked属性：

<template>
  <div>
    <input type="checkbox" v-bind:checked="state" />
  </div>
</template>

这样，当state的值为true时，switch会处于打开状态；当state的值为false时，switch会处于关闭状态。

接下来，我们可以通过添加事件监听来改变state的值，从而改变switch的状态。例如，我们可以为switch添加一个点击事件，当点击switch时，state的值会改变：

<template>
  <div>
    <input type="checkbox" v-bind:checked="state" v-on:click="toggleSwitch" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      state: false // 初始状态为关闭
    }
  },
  methods: {
    toggleSwitch() {
      this.state = !this.state; // 切换state的值
    }
  }
}
</script>

这样，当我们点击switch时，toggleSwitch方法会被调用，state的值会改变，从而改变switch的状态。

通过使用state，我们可以灵活地控制switch的状态，实现我们想要的功能。同时，Vue2中的state也支持响应式更新，即当state的值改变时，与之相关的视图会自动更新。这使得我们可以方便地管理和操作switch的状态。