当前位置：首页 > VUE

vue实现单选

2026-02-25 15:09:30VUE

Vue 实现单选功能

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

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

通过 v-model 绑定一个响应式变量，可以实现单选功能。单选按钮的 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: null,
    };
  },
};
</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: null,
      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: null,
      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="selectedValue" :value="option.value" />
      {{ option.label }}
    </label>
  </div>
</template>

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

使用第三方库

如果需要更复杂的功能，可以使用第三方库如 vue-radio 或 element-ui 的单选组件。

<template>
  <div>
    <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>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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