vue实现单选多选

Vue 实现单选

使用 v-model 绑定单选值，结合 <input type="radio"> 实现单选功能。单选组需要共享同一个 v-model 绑定值，通过 value 属性区分选项。

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

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

Vue 实现多选

多选通过 <input type="checkbox"> 实现，v-model 绑定到数组类型变量。勾选时自动添加值到数组，取消勾选时移除对应值。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        v-model="selected" 
        :value="option.value"
      >
      {{ option.label }}
    </label>
    <p>已选中: {{ selected.join(', ') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: [], // 必须初始化为数组
      options: [
        { value: 'A', label: '选项A' },
        { value: 'B', label: '选项B' },
        { value: 'C', label: '选项C' }
      ]
    }
  }
}
</script>

使用组件库实现

Element UI 的单选/多选组件示例：

<!-- 单选 -->
<el-radio-group v-model="radio">
  <el-radio label="A">选项A</el-radio>
  <el-radio label="B">选项B</el-radio>
</el-radio-group>

<!-- 多选 -->
<el-checkbox-group v-model="checkList">
  <el-checkbox label="A">选项A</el-checkbox>
  <el-checkbox label="B">选项B</el-checkbox>
</el-checkbox-group>

自定义样式单选/多选

通过 CSS 隐藏原生 <input>，用 <span> 模拟选中样式：

<template>
  <div class="custom-checkbox">
    <label 
      v-for="option in options" 
      :key="option.value"
      :class="{ active: selected.includes(option.value) }"
    >
      <input 
        type="checkbox" 
        v-model="selected" 
        :value="option.value" 
        hidden
      >
      <span class="checkmark"></span>
      {{ option.label }}
    </label>
  </div>
</template>

<style>
.custom-checkbox label {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.checkmark {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  margin-right: 8px;
}
.active .checkmark {
  background-color: #409eff;
}
</style>

注意事项

• 单选时 v-model 绑定值应为基本类型（字符串/数字）
• 多选时 v-model 必须绑定到数组，初始值设为 []
• 使用组件库时注意不同库的 API 差异（如 Ant Design Vue 用 a-radio-group）
• 移动端可考虑添加 <fieldset> 提升可访问性