写一个VUE开关灯泡的完整代码

在Vue.js中，我们可以创建一个简单的组件来控制灯泡开关。这里是一个基础的例子，我们将使用`v-model`绑定状态，并通过点击事件切换灯泡的状态：

<template>
  <div class="switch">
    <input type="checkbox" :id="toggleId" v-model="isLightOn" @change="toggleLight">
    <label for="{{ toggleId }}">{{ isLightOn ? '灯泡打开' : '灯泡关闭' }}</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      toggleId: 'lightSwitch', // 灯泡开关ID
      isLightOn: false,        // 初始灯泡状态，默认关闭
    };
  },
  methods: {
    toggleLight() {
      this.isLightOn = !this.isLightOn; // 当状态改变时，更新灯泡状态
    },
  },
};
</script>

<style scoped>
.switch {
  display: inline-block;
}
</style>

在这个例子中：
- `v-model`用于双向数据绑定，当用户点击开关时，`isLightOn`状态会同步变化。
- `@change`监听的是输入框的`change`事件，当我们切换开关时，会触发`toggleLight`方法。
- `toggleLight`方法会简单地将当前的`isLightOn`取反。