vue单选按钮实现

Vue 单选按钮实现方法

在 Vue 中实现单选按钮可以通过 v-model 指令绑定数据，结合 <input type="radio"> 或第三方组件库完成。以下是几种常见实现方式：

原生 HTML 单选按钮

通过原生 <input type="radio"> 绑定 Vue 数据：

<template>
  <div>
    <input type="radio" id="option1" value="A" v-model="selectedOption">
    <label for="option1">选项 A</label>

    <input type="radio" id="option2" value="B" v-model="selectedOption">
    <label for="option2">选项 B</label>

    <p>当前选择: {{ selectedOption }}</p>
  </div>
</template>

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

使用组件库（如 Element UI）

若使用 Element UI 的 Radio 组件：

<template>
  <div>
    <el-radio v-model="selectedOption" label="A">选项 A</el-radio>
    <el-radio v-model="selectedOption" label="B">选项 B</el-radio>
    <p>当前选择: {{ selectedOption }}</p>
  </div>
</template>

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

动态渲染选项

当选项来自后端或需要动态生成时：

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

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

注意事项

• 确保同一组的单选按钮绑定相同的 v-model 变量
• 动态选项建议为每个选项设置唯一的 key
• 可通过 v-bind 实现更复杂的值绑定（如对象）
• 组件库通常提供更多功能（如禁用状态、按钮样式等）