vue实现单选

2026-02-10 08:08:24VUE

Vue 实现单选功能

在 Vue 中实现单选功能可以通过多种方式完成，常见的有使用原生 <input type="radio"> 结合 v-model，或借助第三方 UI 库（如 Element UI、Ant Design Vue 等）。以下是几种实现方法：

使用原生 HTML 和 `v-model`

通过原生 <input type="radio"> 绑定 v-model 实现数据双向绑定。

vue实现单选

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

使用 Element UI 的单选组件

如果项目中使用了 Element UI，可以直接使用 <el-radio> 组件。

vue实现单选

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

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

使用 Ant Design Vue 的单选组件

如果项目中使用了 Ant Design Vue，可以使用 <a-radio> 组件。

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

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

自定义单选组件

如果需要更灵活的单选功能，可以封装一个自定义单选组件。

<template>
  <div>
    <div
      v-for="option in options"
      :key="option.value"
      @click="selectOption(option.value)"
      :class="{ active: selectedOption === option.value }"
    >
      {{ option.label }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true,
    },
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      selectedOption: this.value,
    };
  },
  methods: {
    selectOption(value) {
      this.selectedOption = value;
      this.$emit('input', value);
    },
  },
  watch: {
    value(newVal) {
      this.selectedOption = newVal;
    },
  },
};
</script>

<style scoped>
.active {
  background-color: #f0f0f0;
}
</style>