当前位置：首页 > VUE

vue实现复选

2026-03-27 13:21:39VUE

Vue 实现复选

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

使用 `v-model` 绑定数组

通过 v-model 绑定一个数组，可以轻松实现多选框的选择和取消选择。当复选框被选中时，其对应的值会被添加到数组中；取消选中时，值会从数组中移除。

vue实现复选

<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-for` 动态生成复选框

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

vue实现复选

<template>
  <div>
    <div v-for="option in options" :key="option.value">
      <input
        type="checkbox"
        :id="option.value"
        :value="option.value"
        v-model="selectedOptions"
      />
      <label :for="option.value">{{ option.label }}</label>
    </div>
    <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>

自定义复选框组件

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

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

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

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

使用第三方库

如果需要更丰富的功能（如全选、反选等），可以考虑使用第三方库，例如 vue-multiselect。

<template>
  <div>
    <multiselect
      v-model="selectedOptions"
      :options="options"
      :multiple="true"
      :close-on-select="false"
      placeholder="Select options"
      label="label"
      track-by="value"
    />
    <p>Selected options: {{ selectedOptions }}</p>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect';

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