vue checkbox使用

Vue.js中的Checkbox（复选框）是一个常见的表单元素，用于让用户可以选择一项或多项目。在Vue应用中使用Checkbox通常是这样的：

1. **HTML模板**：

<template>
  <div>
    <input type="checkbox" v-model="selectedOption"> Select me
    <br/>
    Selected option: {{ selectedOption }}
  </div>
</template>

在这个例子中，`v-model`指令将用户的勾选状态绑定到数据属性`selectedOption`。

2. **JavaScript (script部分)**：

<script>
export default {
  data() {
    return {
      selectedOption: false // 默认未选中
    };
  }
};
</script>

当你勾选或取消勾选Checkbox时，`selectedOption`的值会在`true`和`false`之间切换，并实时更新视图。

3. **事件处理**：
Vue的Checkbox支持`change`事件，你可以监听这个事件来做额外的操作，例如：

<input type="checkbox" @change="handleSelectionChange">

在methods里定义`handleSelectionChange`函数：

methods: {
  handleSelectionChange(event) {
    console.log('Checkbox changed:', event.target.checked);
  }
}