vue怎么实现单选

2026-02-11 09:46:49VUE

使用原生HTML单选按钮

在Vue中可以直接使用HTML的<input type="radio">实现单选功能。通过v-model绑定数据，确保同一组单选按钮的name属性相同。

vue怎么实现单选

<template>
  <div>
    <input type="radio" id="option1" value="Option1" v-model="selectedOption" name="group">
    <label for="option1">Option 1</label>
    <input type="radio" id="option2" value="Option2" v-model="selectedOption" name="group">
    <label for="option2">Option 2</label>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

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

使用Vue组件库（如Element UI）

若使用UI库（如Element UI），可直接调用其封装好的单选组件，例如el-radio。

vue怎么实现单选

<template>
  <div>
    <el-radio v-model="selectedOption" label="Option1">Option 1</el-radio>
    <el-radio v-model="selectedOption" label="Option2">Option 2</el-radio>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

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

动态渲染单选按钮

通过v-for动态生成单选按钮列表，适用于选项从接口获取的场景。

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

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

自定义单选组件

封装可复用的单选组件，通过props接收选项列表，emit事件传递选中值。

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

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

<!-- 父组件中使用 -->
<template>
  <RadioGroup 
    v-model="selectedOption" 
    :options="[
      { value: 'X', label: 'Choice X' },
      { value: 'Y', label: 'Choice Y' }
    ]" 
  />
  <p>Selected: {{ selectedOption }}</p>
</template>