当前位置：首页 > VUE

vue 实现复选

2026-01-07 07:29:44VUE

Vue 实现复选功能

在 Vue 中实现复选功能可以通过多种方式完成，以下是常见的几种方法：

使用 `v-model` 绑定数组

通过 v-model 绑定一个数组，可以自动收集用户选择的复选框值。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        v-model="selectedOptions" 
        :value="option.value"
      >
      {{ option.label }}
    </label>
    <p>Selected: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'orange', label: 'Orange' }
      ],
      selectedOptions: []
    };
  }
};
</script>

自定义复选框组件

如果需要更复杂的逻辑或样式，可以封装一个自定义复选框组件。

<template>
  <div>
    <checkbox-group v-model="selectedItems">
      <checkbox-item value="item1">Item 1</checkbox-item>
      <checkbox-item value="item2">Item 2</checkbox-item>
      <checkbox-item value="item3">Item 3</checkbox-item>
    </checkbox-group>
    <p>Selected: {{ selectedItems }}</p>
  </div>
</template>

<script>
import CheckboxGroup from './CheckboxGroup.vue';
import CheckboxItem from './CheckboxItem.vue';

export default {
  components: { CheckboxGroup, CheckboxItem },
  data() {
    return {
      selectedItems: []
    };
  }
};
</script>

动态生成复选框

根据数据动态生成复选框，适合选项数量不固定的场景。

<template>
  <div>
    <div v-for="item in dynamicItems" :key="item.id">
      <input 
        type="checkbox" 
        v-model="checkedItems" 
        :value="item.id"
      >
      {{ item.name }}
    </div>
    <p>Checked IDs: {{ checkedItems }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicItems: [
        { id: 1, name: 'Option A' },
        { id: 2, name: 'Option B' },
        { id: 3, name: 'Option C' }
      ],
      checkedItems: []
    };
  }
};
</script>

全选与反选功能

实现全选或反选逻辑，可以通过计算属性或方法完成。

<template>
  <div>
    <label>
      <input type="checkbox" v-model="selectAll"> Select All
    </label>
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        v-model="selectedIds" 
        :value="item.id"
      >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedIds: []
    };
  },
  computed: {
    selectAll: {
      get() {
        return this.selectedIds.length === this.items.length;
      },
      set(value) {
        this.selectedIds = value ? this.items.map(item => item.id) : [];
      }
    }
  }
};
</script>