当前位置：首页 > VUE

vue实现单选

2026-01-07 22:09:26VUE

实现 Vue 单选功能

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

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

通过 v-model 可以轻松实现单选功能，将单选按钮的值绑定到同一个变量：

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

    <input type="radio" id="option3" value="option3" v-model="selectedOption" />
    <label for="option3">Option 3</label>

    <p>Selected option: {{ selectedOption }}</p>
  </div>
</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"
      />
      <label :for="option.value">{{ option.label }}</label>
    </div>
    <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>
    <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>

在 RadioGroup.vue 中：

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

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

使用第三方库

如果需要更丰富的功能，可以使用第三方库如 v-radio 或 element-ui 的单选组件：

<template>
  <el-radio-group v-model="selectedOption">
    <el-radio v-for="option in options" :key="option.value" :label="option.value">
      {{ option.label }}
    </el-radio>
  </el-radio-group>
</template>

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

以上方法可以根据具体需求选择使用，v-model 是最简单直接的方式，而组件封装和第三方库适合更复杂的场景。

vue实现单选