vue单选按钮实现

2026-03-26 19:32:44VUE

Vue 单选按钮实现

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

vue单选按钮实现

原生 HTML 单选按钮实现

通过 v-model 绑定单选按钮组的值，确保同一组的 name 属性一致：

vue单选按钮实现

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

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

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

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

使用组件库（如 Element UI）

若使用 Element UI，可通过 el-radio 或 el-radio-group 快速实现：

<template>
  <div>
    <el-radio-group v-model="selectedOption">
      <el-radio label="option1">选项 1</el-radio>
      <el-radio label="option2">选项 2</el-radio>
    </el-radio-group>
    <p>当前选择: {{ 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="dynamicOptions" 
      />
      <label :for="option.value">{{ option.label }}</label>
    </div>
    <p>当前选择: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'opt1', label: '动态选项 1' },
        { value: 'opt2', label: '动态选项 2' }
      ]
    }
  }
}
</script>