vue 复选框

<template>
  <div>
    <!-- 单个复选框 -->
    <input type="checkbox" id="checkbox1" v-model="isChecked">
    <label for="checkbox1">选项1</label>

    <!-- 多个复选框 -->
    <div v-for="(item, index) in items" :key="index">
      <input type="checkbox" :id="'checkbox' + index" :value="item.value" v-model="checkedItems">
      <label :for="'checkbox' + index">{{ item.label }}</label>
    </div>

    <p>选中的值: {{ checkedItems }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false, // 单个复选框的绑定值
      checkedItems: [], // 多个复选框的绑定数组
      items: [
        { label: '选项2', value: 'A' },
        { label: '选项3', value: 'B' },
        { label: '选项4', value: 'C' }
      ]
    };
  }
};
</script>

解释说明：

1. 单个复选框：使用 v-model 绑定到一个布尔值 isChecked，当复选框被选中时，isChecked 的值会变为 true，否则为 false。
2. 多个复选框：使用 v-model 绑定到一个数组 checkedItems，每个复选框的值会被添加或移除到这个数组中。通过 v-for 循环渲染多个复选框，并且每个复选框都有唯一的 id 和 for 属性，确保标签和输入框关联。
3. 显示选中的值：通过插值表达式 {{ checkedItems }} 显示当前选中的复选框值。