vue实现单选按钮组

2026-02-21 02:15:03VUE

实现单选按钮组的基本方法

在Vue中实现单选按钮组可以通过v-model指令绑定数据，结合input元素的type="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>
    <label>
      <input type="radio" v-model="selectedOption" value="option3"> 
      Option 3
    </label>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

动态生成单选按钮组

当选项需要从API或动态数据生成时，可以使用v-for指令：

<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: 'A', label: 'Alpha' },
        { value: 'B', label: 'Beta' },
        { value: 'C', label: 'Gamma' }
      ]
    }
  }
}
</script>

使用组件封装单选组

对于需要复用的场景，可以创建可复用的单选组组件：

<!-- RadioGroup.vue -->
<template>
  <div class="radio-group">
    <label 
      v-for="option in options" 
      :key="option.value"
      class="radio-label"
    >
      <input
        type="radio"
        :value="option.value"
        v-model="internalValue"
        @change="$emit('change', internalValue)"
      >
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  props: {
    value: { type: [String, Number], default: '' },
    options: { type: Array, required: true }
  },
  computed: {
    internalValue: {
      get() { return this.value },
      set(val) { this.$emit('input', val) }
    }
  }
}
</script>

<style>
.radio-group { display: flex; gap: 1rem; }
.radio-label { cursor: pointer; }
</style>

处理表单验证

结合Vuelidate或其他验证库实现表单验证：

<template>
  <form @submit.prevent="submit">
    <radio-group 
      v-model="form.option"
      :options="options"
      @blur="$v.form.option.$touch()"
    />
    <span v-if="$v.form.option.$error">必须选择一个选项</span>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { required } from 'vuelidate/lib/validators'
export default {
  data() {
    return {
      form: { option: null },
      options: [
        { value: 1, label: 'Yes' },
        { value: 0, label: 'No' }
      ]
    }
  },
  validations: {
    form: {
      option: { required }
    }
  },
  methods: {
    submit() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // 提交逻辑
      }
    }
  }
}
</script>

样式定制技巧

使用CSS自定义单选按钮外观的常见方法：

/* 隐藏原生单选按钮 */
.radio-custom input[type="radio"] {
  position: absolute;
  opacity: 0;
}

/* 创建自定义单选按钮 */
.radio-custom label {
  position: relative;
  padding-left: 2rem;
  cursor: pointer;
}

.radio-custom label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid #ccc;
  border-radius: 50%;
}

/* 选中状态样式 */
.radio-custom input[type="radio"]:checked + label::before {
  border-color: #42b983;
}

.radio-custom input[type="radio"]:checked + label::after {
  content: '';
  position: absolute;
  left: 0.4rem;
  top: 0.4rem;
  width: 0.6rem;
  height: 0.6rem;
  background: #42b983;
  border-radius: 50%;
}

vue实现单选按钮组