vue 实现组单选

2026-03-08 15:20:34VUE

Vue 实现单选组

在 Vue 中实现单选组可以通过 v-model 绑定数据，结合 <input type="radio"> 或自定义组件完成。以下是两种常见实现方式：

原生 HTML 单选按钮组

通过 v-model 绑定到同一个变量，确保单选逻辑：

<template>
  <div>
    <label>
      <input type="radio" v-model="selectedOption" value="option1">
      Option 1
    </label>
    <label>
      <input type="radio" v-model="selectedOption" value="option2">
      Option 2
    </label>
    <label>
      <input type="radio" v-model="selectedOption" value="option3">
      Option 3
    </label>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    }
  }
}
</script>

动态渲染单选组

当选项数据来自数组时，可以用 v-for 动态生成：

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

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'orange', label: 'Orange' }
      ]
    }
  }
}
</script>

自定义单选组件

封装可复用的单选组件，通过 v-model 实现双向绑定：

vue 实现组单选

<!-- RadioGroup.vue -->
<template>
  <div class="radio-group">
    <label v-for="option in options" :key="option.value">
      <input
        type="radio"
        :value="option.value"
        :checked="option.value === modelValue"
        @change="$emit('update:modelValue', option.value)"
      >
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    modelValue: {
      type: [String, Number],
      default: ''
    }
  },
  emits: ['update:modelValue']
}
</script>

<!-- 使用示例 -->
<template>
  <RadioGroup v-model="selectedFruit" :options="fruitOptions" />
</template>