当前位置：首页 > VUE

vue实现多选和单选

2026-01-22 17:45:12VUE

Vue 实现单选功能

使用 v-model 绑定到同一个变量，通过 radio 的 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 实现多选功能

使用 v-model 绑定到数组，通过 checkbox 的 value 属性收集多选值。数组会自动包含所有选中项的 value。

<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 }}</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 和 el-checkbox-group 提供更丰富的样式和功能：

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

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

<script>
export default {
  data() {
    return {
      radio: 1,
      checkList: []
    }
  }
}
</script>

动态渲染选项

通过 v-for 动态渲染选项列表，适合从接口获取数据的场景：

<template>
  <div>
    <!-- 动态单选 -->
    <div v-for="item in dynamicOptions" :key="item.id">
      <input 
        type="radio" 
        v-model="dynamicSelected" 
        :value="item.id"
      >
      {{ item.name }}
    </div>

    <!-- 动态多选 -->
    <div v-for="item in dynamicOptions" :key="item.id">
      <input 
        type="checkbox" 
        v-model="dynamicMultiple" 
        :value="item.id"
      >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicSelected: null,
      dynamicMultiple: [],
      dynamicOptions: [
        { id: 1, name: '动态选项1' },
        { id: 2, name: '动态选项2' }
      ]
    }
  }
}
</script>