vue checkbox

<template>
  <div>
    <!-- 单个 Checkbox -->
    <label>
      <input type="checkbox" v-model="isChecked" />
      单个复选框
    </label>
    <p>是否选中: {{ isChecked }}</p>

    <!-- 多个 Checkbox -->
    <div v-for="item in items" :key="item.id">
      <label>
        <input type="checkbox" v-model="selectedItems" :value="item.name" />
        {{ item.name }}
      </label>
    </div>
    <p>选中的项: {{ selectedItems }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false, // 单个 Checkbox 的绑定值
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: [] // 多个 Checkbox 的绑定值
    };
  }
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明

1. 单个 Checkbox:

   • 使用 v-model 指令将复选框的状态绑定到 isChecked 数据属性。
   • 当用户点击复选框时，isChecked 的值会自动更新为 true 或 false。

2. 多个 Checkbox:

   • 使用 v-for 指令遍历 items 数组，生成多个复选框。
   • 每个复选框的值通过 :value 绑定到对应的 item.name。
   • 使用 v-model 将多个复选框的状态绑定到 selectedItems 数组。
   • 当用户选择或取消选择复选框时，selectedItems 数组会自动更新包含或移除相应的值。