当前位置：首页 > VUE

vue实现单选

2026-02-09 09:55:45VUE

Vue 实现单选功能的方法

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

在 Vue 中，可以通过 v-model 指令实现单选功能。v-model 会自动将选中的单选按钮的值绑定到指定的数据属性上。

<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: 'option1', // 默认选中 Option 1
    };
  },
};
</script>

使用 `v-for` 动态生成单选按钮

如果需要动态生成单选按钮，可以使用 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: 'option1',
      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: 'option1',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' },
      ],
    };
  },
};
</script>

RadioGroup.vue 组件的实现：

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

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

使用第三方库

如果需要更复杂的单选功能，可以考虑使用第三方库，如 element-ui 或 vant。

<template>
  <div>
    <el-radio-group v-model="selectedOption">
      <el-radio label="option1">Option 1</el-radio>
      <el-radio label="option2">Option 2</el-radio>
      <el-radio label="option3">Option 3</el-radio>
    </el-radio-group>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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