当前位置：首页 > VUE

vue checbox实现单选

2026-01-18 11:03:43VUE

使用 `v-model` 和计算属性

在 Vue 中，可以通过 v-model 绑定一个计算属性来实现单选效果。计算属性用于动态控制复选框的选中状态。

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'A', label: 'Option A' },
        { value: 'B', label: 'Option B' },
        { value: 'C', label: 'Option C' },
      ],
      selected: null,
    };
  },
  computed: {
    selectedOption: {
      get() {
        return this.selected;
      },
      set(value) {
        this.selected = this.selected === value ? null : value;
      },
    },
  },
};
</script>

使用 `@change` 事件手动控制

通过监听 @change 事件，手动更新选中状态，确保只有一个选项被选中。

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'A', label: 'Option A' },
        { value: 'B', label: 'Option B' },
        { value: 'C', label: 'Option C' },
      ],
      selected: null,
    };
  },
  methods: {
    handleChange(value) {
      this.selected = this.selected === value ? null : value;
    },
  },
};
</script>

使用单选框 (`radio`) 替代

如果目标是实现单选行为，更推荐直接使用单选框 (radio)，因为它是原生支持单选的输入类型。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input
        type="radio"
        :value="option.value"
        v-model="selected"
      />
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'A', label: 'Option A' },
        { value: 'B', label: 'Option B' },
        { value: 'C', label: 'Option C' },
      ],
      selected: null,
    };
  },
};
</script>

使用第三方库

如果需要更复杂的功能（如样式定制或分组管理），可以使用第三方库如 v-checkbox 或 element-ui 的复选框组件，并配置单选模式。

<template>
  <el-checkbox-group v-model="selected" :min="0" :max="1">
    <el-checkbox v-for="option in options" :key="option.value" :label="option.value">
      {{ option.label }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'A', label: 'Option A' },
        { value: 'B', label: 'Option B' },
        { value: 'C', label: 'Option C' },
      ],
      selected: [],
    };
  },
};
</script>

vue checbox实现单选