当前位置：首页 > VUE

vue 实现复选

2026-02-09 22:50:38VUE

Vue 实现复选的方法

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

使用 `v-model` 绑定数组

Vue 的 v-model 可以绑定到一个数组，当复选框被选中时，其 value 会被添加到数组中；取消选中时，会从数组中移除。

<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 options: {{ selectedOptions }}</p>
  </div>
</template>

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

动态生成复选框

如果选项是动态生成的，可以通过 v-for 遍历选项列表，并为每个选项绑定一个复选框。

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        :id="'checkbox-' + item.id" 
        v-model="item.checked"
      >
      <label :for="'checkbox-' + item.id">{{ item.name }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', checked: false },
        { id: 2, name: 'Item 2', checked: false },
        { id: 3, name: 'Item 3', checked: false }
      ]
    };
  }
};
</script>

使用计算属性处理选中状态

可以通过计算属性对选中的值进行进一步处理，例如过滤或映射。

<template>
  <div>
    <label v-for="fruit in fruits" :key="fruit">
      <input 
        type="checkbox" 
        v-model="selectedFruits" 
        :value="fruit"
      >
      {{ fruit }}
    </label>
    <p>Selected fruits: {{ selectedFruits }}</p>
    <p>Selected fruits count: {{ selectedCount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Orange'],
      selectedFruits: []
    };
  },
  computed: {
    selectedCount() {
      return this.selectedFruits.length;
    }
  }
};
</script>

自定义复选框组件

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

<template>
  <div>
    <custom-checkbox 
      v-for="option in options" 
      :key="option.value"
      v-model="selectedOptions"
      :value="option.value"
      :label="option.label"
    />
  </div>
</template>

<script>
import CustomCheckbox from './CustomCheckbox.vue';

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

使用第三方库

如果需要更丰富的功能（如全选、反选等），可以使用第三方库如 vue-checkbox-radio 或 element-ui 的复选框组件。

vue 实现复选

<template>
  <div>
    <el-checkbox-group v-model="selectedOptions">
      <el-checkbox 
        v-for="option in options" 
        :key="option.value" 
        :label="option.value"
      >
        {{ option.label }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
import { ElCheckbox, ElCheckboxGroup } from 'element-ui';

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