当前位置：首页 > VUE

vue单选实现

2026-01-07 22:26:24VUE

Vue 单选实现

在 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: '',
    };
  },
};
</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>

使用自定义组件封装单选组

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

<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>
    <label v-for="option in options" :key="option.value">
      <input
        type="radio"
        :value="option.value"
        :checked="option.value === modelValue"
        @change="$emit('update:modelValue', option.value)"
      />
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: String,
      required: true,
    },
    options: {
      type: Array,
      required: true,
    },
  },
  emits: ['update:modelValue'],
};
</script>

使用第三方库

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

<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 label="option3">Option 3</el-radio>
  </el-radio-group>
</template>

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

以上方法涵盖了从基础到高级的单选实现方式，可以根据具体需求选择合适的方法。

vue单选实现