vue实现radio

2026-01-13 00:24:51VUE

Vue 实现 Radio 单选按钮

在 Vue 中实现 Radio 单选按钮可以通过 v-model 绑定数据，结合原生 HTML 的 <input type="radio"> 或使用第三方组件库（如 Element UI、Vuetify 等）。以下是几种常见实现方式：

原生 HTML 实现

使用原生 <input type="radio"> 绑定 v-model，通过 value 属性区分选项：

vue实现radio

<template>
  <div>
    <label>
      <input type="radio" v-model="selectedOption" value="option1" />
      Option 1
    </label>
    <label>
      <input type="radio" v-model="selectedOption" value="option2" />
      Option 2
    </label>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

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

动态渲染选项

通过 v-for 动态渲染 Radio 选项，适用于选项数据来自后端或动态配置的场景：

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

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' }
      ]
    };
  }
};
</script>

使用 Element UI 的 Radio 组件

若项目中使用 Element UI，可以直接使用其封装好的 el-radio 组件：

vue实现radio

<template>
  <div>
    <el-radio v-model="selectedOption" label="option1">Option 1</el-radio>
    <el-radio v-model="selectedOption" label="option2">Option 2</el-radio>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

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

自定义 Radio 组件

封装一个可复用的自定义 Radio 组件，支持灵活样式和功能扩展：

<!-- CustomRadio.vue -->
<template>
  <label class="custom-radio">
    <input
      type="radio"
      :checked="modelValue === value"
      @change="$emit('update:modelValue', value)"
    />
    <span class="radio-label">{{ label }}</span>
  </label>
</template>

<script>
export default {
  props: {
    modelValue: { type: [String, Number], required: true },
    value: { type: [String, Number], required: true },
    label: { type: String, required: true }
  }
};
</script>

<style scoped>
.custom-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
</style>

使用时通过 v-model 绑定数据：

<template>
  <div>
    <CustomRadio
      v-model="selectedOption"
      value="red"
      label="Red"
    />
    <CustomRadio
      v-model="selectedOption"
      value="blue"
      label="Blue"
    />
  </div>
</template>

<script>
import CustomRadio from './CustomRadio.vue';

export default {
  components: { CustomRadio },
  data() {
    return {
      selectedOption: ''
    };
  }
};
</script>