当前位置：首页 > VUE

vue 实现组单选

2026-01-16 02:01:21VUE

Vue 实现单选组

在 Vue 中实现单选组可以通过多种方式，以下是几种常见的实现方法：

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

通过 v-model 绑定一个变量，单选按钮的 value 属性对应不同的值。当用户选择某个选项时，绑定的变量会自动更新为对应 value。

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

使用动态渲染选项

如果选项是动态生成的，可以通过 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 option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ]
    };
  }
};
</script>

使用组件封装单选组

如果需要复用单选组逻辑，可以封装一个自定义组件。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="radio" 
        :value="option.value" 
        :checked="option.value === modelValue"
        @change="$emit('update:modelValue', option.value)"
      />
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    modelValue: {
      type: String,
      required: true
    }
  },
  emits: ['update:modelValue']
};
</script>

在父组件中使用自定义单选组

<template>
  <div>
    <RadioGroup 
      v-model="selectedOption" 
      :options="options" 
    />
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

export default {
  components: { RadioGroup },
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ]
    };
  }
};
</script>

注意事项