当前位置：首页 > VUE

vue 实现复选

2026-01-12 09:45:32VUE

Vue 实现复选的方法

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

使用 `v-model` 绑定数组

Vue 的 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>选中的选项: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedOptions: []
    };
  }
};
</script>

自定义复选框组件

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

<template>
  <div>
    <custom-checkbox 
      v-for="option in options" 
      :key="option.value"
      :value="option.value"
      :label="option.label"
      v-model="selectedOptions"
    />
    <p>选中的选项: {{ selectedOptions }}</p>
  </div>
</template>

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

export default {
  components: { CustomCheckbox },
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedOptions: []
    };
  }
};
</script>

使用第三方库

如果需要更丰富的功能（如全选、半选等），可以使用第三方库如 element-ui 或 vuetify。

vue 实现复选

<template>
  <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>
  <p>选中的选项: {{ selectedOptions }}</p>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedOptions: []
    };
  }
};
</script>