复选框组件

复选框是网页中常用的一种输入控件，用于收集用户的布尔值输入。在Vue.js框架中，复选框组件可以帮助你轻松地实现表单数据绑定和状态管理。

使用方法

基本用法

首先，你需要在模板中添加复选框元素，并使用v-model指令绑定到相应的数据模型上。
```
<input type="checkbox" v-model="checked">
<span>{{ checked }}</span>
```
在上面的代码中，当用户点击复选框时，checked的值会根据复选框的状态自动更新。
绑定值

你也可以为复选框绑定一个具体的值，这样当复选框被选中时，它会返回你指定的值。
```
<input type="checkbox" v-model="checked" :true-value="1" :false-value="0">
<span>{{ checked }}</span>
```
在这个例子中，当复选框被选中时，checked的值将会是1，否则是0。

属性

v-model: 绑定到复选框的变量。
true-value: 当复选框被选中时返回的值。
false-value: 当复选框未被选中时返回的值。

示例

下面是一个简单的示例，展示了如何使用复选框组件来创建一个表单：

<template>
  <div>
    <h1>用户信息表单</h1>
    <form>
      <div>
        <label>
          <input type="checkbox" v-model="userInfo同意" :true-value="true" :false-value="false">
          我同意用户协议
        </label>
      </div>
      <button type="submit" :disabled="!userInfo同意">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        同意: false
      }
    };
  }
};
</script>

在这个例子中，当用户勾选“我同意用户协议”复选框时，表单提交按钮才会启用。

扩展阅读

Vue.js 官方文档 - 表单输入绑定

希望这篇文档能帮助你更好地理解Vue.js中的复选框组件。如果你还有其他问题，请访问我们的官方论坛寻求帮助。