当前位置：首页 > VUE

vue实现radio

2026-02-10 07:43:52VUE

Vue 实现 Radio 单选按钮

在 Vue 中实现单选按钮可以通过 v-model 绑定数据，结合 input 元素的 type="radio" 属性。以下是具体实现方法：

基础实现

vue实现radio

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

    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    }
  }
}
</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>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

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

组件化封装 对于复用场景，可以封装为 Radio 组件：

vue实现radio

<!-- RadioButton.vue -->
<template>
  <label class="radio-container">
    <input 
      type="radio" 
      :checked="isChecked"
      :value="value"
      @change="$emit('change', value)"
    >
    <span class="checkmark"></span>
    {{ label }}
  </label>
</template>

<script>
export default {
  props: {
    label: String,
    value: [String, Number],
    isChecked: Boolean
  }
}
</script>

<style>
/* 添加自定义样式 */
.radio-container {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  cursor: pointer;
}
</style>

使用自定义组件

<template>
  <div>
    <RadioButton 
      v-for="option in options"
      :key="option.value"
      :label="option.label"
      :value="option.value"
      :is-checked="selectedOption === option.value"
      @change="selectedOption = $event"
    />
  </div>
</template>

<script>
import RadioButton from './RadioButton.vue'

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

注意事项

同一组的 Radio 需要绑定相同的 v-model 变量
动态生成的 Radio 要确保每个选项有唯一的 id 和对应的 label 的 for 属性
使用组件时需要通过 props 传递当前选中状态
样式可以通过 CSS 自定义，包括选中状态样式

表单验证集成

如果需要表单验证，可以结合 Vue 的验证库如 VeeValidate：

<template>
  <Form @submit="onSubmit">
    <Field 
      name="gender" 
      as="select"
      v-model="gender"
      rules="required"
    >
      <option value="">Select gender</option>
      <option value="male">Male</option>
      <option value="female">Female</option>
    </Field>
    <ErrorMessage name="gender" />
  </Form>
</template>

以上方法覆盖了 Vue 中实现 Radio 单选按钮的常见场景，从基础实现到组件封装，可以根据项目需求选择适合的方式。