vue radio实现单选

2026-01-19 02:27:32VUE

实现 Vue 单选按钮（Radio）的方法

使用原生 `<input type="radio">`

通过 v-model 绑定数据实现单选功能，适合基础场景：

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

    <input type="radio" id="option2" value="Option2" v-model="selectedOption">
    <label for="option2">Option 2</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '' // 默认选中的值
    }
  }
}
</script>

使用 Element UI 的 Radio 组件

适用于使用 Element UI 框架的项目：

vue radio实现单选

<template>
  <div>
    <el-radio v-model="radioValue" label="1">Option A</el-radio>
    <el-radio v-model="radioValue" label="2">Option B</el-radio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radioValue: '1' // 默认选中值需与 label 匹配
    }
  }
}
</script>

动态生成 Radio 选项

通过 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>
  </div>
</template>

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

自定义 Radio 组件

创建可复用的自定义单选组件：

vue radio实现单选

<!-- CustomRadio.vue -->
<template>
  <div class="custom-radio" @click="selectOption">
    <div :class="{ 'active': isSelected }"></div>
    <span>{{ label }}</span>
  </div>
</template>

<script>
export default {
  props: {
    label: String,
    value: String,
    selectedValue: String
  },
  computed: {
    isSelected() {
      return this.value === this.selectedValue
    }
  },
  methods: {
    selectOption() {
      this.$emit('input', this.value)
    }
  }
}
</script>

<style scoped>
.custom-radio { display: flex; align-items: center; cursor: pointer; }
.active { background-color: #409EFF; }
</style>

使用 Vuex 管理状态

当需要全局状态管理时：

// store.js
export default new Vuex.Store({
  state: {
    radioSelection: null
  },
  mutations: {
    setRadioSelection(state, payload) {
      state.radioSelection = payload
    }
  }
})

<template>
  <input 
    type="radio" 
    v-model="$store.state.radioSelection" 
    value="storeOption"
  >
</template>

表单验证集成

结合 vee-validate 进行表单验证：

<template>
  <ValidationProvider rules="required" v-slot="{ errors }">
    <input type="radio" v-model="choice" value="accept">
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</template>