当前位置：首页 > VUE

vue单选按钮实现

2026-02-09 10:58:21VUE

使用 `v-model` 绑定单选按钮

在 Vue 中，可以通过 v-model 实现单选按钮的数据绑定。单选按钮需要共享相同的 v-model 值，通过 value 属性区分选项。

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

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

    <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" 
      />
      <label :for="option.value">{{ option.label }}</label>
    </div>
    <p>选中的选项: {{ selectedOption }}</p>
  </div>
</template>

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

使用组件库实现（如 Element UI）

若使用 UI 库（如 Element UI），可通过封装好的单选框组件快速实现。

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

处理单选按钮事件

监听 change 事件或在 v-model 变化时触发方法，实现业务逻辑。

vue单选按钮实现

<template>
  <div>
    <input 
      type="radio" 
      value="agree" 
      v-model="agreement" 
      @change="handleChange"
    />
    <label>同意协议</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      agreement: false
    }
  },
  methods: {
    handleChange() {
      console.log('选项变化:', this.agreement);
    }
  }
}
</script>