当前位置：首页 > VUE

vue 实现单选和多选

2026-02-23 09:11:15VUE

Vue 实现单选

在 Vue 中实现单选功能通常使用 v-model 绑定到同一个变量，确保同一时间只有一个选项被选中。

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

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

Vue 实现多选

多选功能通过 v-model 绑定到数组类型变量，配合 checkbox 实现多选。

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

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

使用组件库实现

若使用 Element UI 等组件库，可直接调用封装好的单选/多选组件：

<!-- 单选 -->
<el-radio-group v-model="selectedOption">
  <el-radio v-for="option in options" :label="option.value">
    {{ option.label }}
  </el-radio>
</el-radio-group>

<!-- 多选 -->
<el-checkbox-group v-model="selectedOptions">
  <el-checkbox v-for="option in options" :label="option.value">
    {{ option.label }}
  </el-checkbox>
</el-checkbox-group>

动态绑定选项

选项数据可从后端 API 动态获取：

export default {
  data() {
    return {
      selectedOptions: [],
      options: []
    }
  },
  async created() {
    const res = await fetch('/api/options');
    this.options = await res.json();
  }
}