当前位置：首页 > VUE

vue radio实现单选

2026-02-19 18:50:44VUE

使用 `v-model` 绑定单选值

在 Vue 中，通过 v-model 绑定一个变量到 input[type="radio"]，确保同一组单选按钮的 name 属性相同。

<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>

动态渲染单选按钮组

通过 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>

使用组件库（如 Element UI）

若使用 UI 库如 Element UI，可直接调用封装好的单选框组件。

<template>
  <el-radio-group v-model="selectedOption">
    <el-radio label="option1">Option 1</el-radio>
    <el-radio label="option2">Option 2</el-radio>
  </el-radio-group>
</template>

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

处理单选事件

通过 @change 监听单选变化，执行自定义逻辑。

<template>
  <input 
    type="radio" 
    value="notify" 
    v-model="selectedOption" 
    @change="handleChange"
  >
</template>

<script>
export default {
  methods: {
    handleChange() {
      console.log('选项已变更:', this.selectedOption);
    }
  }
}
</script>