当前位置：首页 > VUE

vue如何实现单选

2026-02-10 22:35:24VUE

实现单选的方法

在Vue中实现单选功能，可以通过以下几种方式完成，具体取决于使用场景和需求。

使用原生HTML单选按钮

通过v-model绑定单选按钮组的值，确保同一组单选按钮的name属性相同。

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

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

使用Vue组件库的单选组件

许多UI库（如Element UI、Vuetify）提供了封装好的单选组件，直接调用即可。

Element UI示例：

<template>
  <el-radio-group v-model="selectedOption">
    <el-radio label="option1">Option 1</el-radio>
    <el-radio label="option2">Option 2</el-radio>
  </el-radio-group>
</template>

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

动态生成单选按钮

通过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"
        name="dynamicOptions"
      >
      <label :for="option.value">{{ option.label }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'opt1', label: 'Dynamic Option 1' },
        { value: 'opt2', label: 'Dynamic Option 2' }
      ]
    };
  }
};
</script>

自定义单选组件

封装一个可复用的单选组件，适用于项目中有多处需要单选功能的场景。

子组件（RadioButton.vue）：

<template>
  <div class="radio-button" @click="selectOption">
    <input 
      type="radio" 
      :id="value" 
      :value="value" 
      v-model="internalValue"
      :name="name"
    >
    <label :for="value">{{ label }}</label>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
    label: String,
    name: String,
    modelValue: String
  },
  computed: {
    internalValue: {
      get() { return this.modelValue; },
      set(val) { this.$emit('update:modelValue', val); }
    }
  },
  methods: {
    selectOption() {
      this.internalValue = this.value;
    }
  }
};
</script>

父组件调用：

vue如何实现单选

<template>
  <div>
    <RadioButton 
      v-model="selectedOption"
      value="custom1"
      label="Custom Option 1"
      name="customGroup"
    />
    <RadioButton 
      v-model="selectedOption"
      value="custom2"
      label="Custom Option 2"
      name="customGroup"
    />
  </div>
</template>

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

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