vue checkbox选中和不选中

<template>
  <div>
    <input type="checkbox" v-model="isChecked" @change="handleChange">
    <label>{{ isChecked ? '已选中' : '未选中' }}</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false // 控制 checkbox 的选中状态，默认为不选中
    };
  },
  methods: {
    handleChange() {
      console.log(this.isChecked ? 'Checkbox 已选中' : 'Checkbox 未选中');
      // 当 checkbox 状态改变时，触发此方法，并在控制台输出当前状态
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自行添加 */
</style>

解释说明：

1. v-model 指令：用于双向绑定 input 元素的值到组件的 data 中。在这个例子中，v-model="isChecked" 将 input 的选中状态与 data 中的 isChecked 绑定在一起。
2. @change 事件：当 checkbox 的状态发生变化时（即用户点击了复选框），会触发 handleChange 方法。
3. isChecked 数据属性：用于存储 checkbox 的选中状态，默认为 false，表示初始状态下复选框是未选中的。
4. handleChange 方法：每当 checkbox 的状态发生变化时，该方法会被调用，并在控制台输出当前的状态信息。

这样你就可以通过 isChecked 来判断复选框是否被选中，并且可以在状态变化时执行相应的逻辑。