当前位置：首页 > VUE

vue实现复选功能

2026-02-11 08:29:16VUE

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

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

使用 `v-bind` 和 `v-on` 手动控制

如果不希望使用 v-model，可以通过 v-bind 和 v-on 手动控制复选框的状态。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        :checked="isSelected(option.value)" 
        @change="toggleOption(option.value)"
      >
      {{ option.label }}
    </label>
    <p>Selected options: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ],
      selectedOptions: []
    };
  },
  methods: {
    isSelected(value) {
      return this.selectedOptions.includes(value);
    },
    toggleOption(value) {
      if (this.isSelected(value)) {
        this.selectedOptions = this.selectedOptions.filter(v => v !== value);
      } else {
        this.selectedOptions.push(value);
      }
    }
  }
};
</script>

使用第三方组件库

如果需要更复杂的复选功能（如全选、分组等），可以使用第三方组件库（如 Element UI、Vuetify 或 Ant Design Vue）。

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

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