当前位置：首页 > VUE

vue单选实现

2026-02-10 08:36:33VUE

基础单选实现

在 Vue 中实现单选功能可以通过 v-model 绑定到同一个变量，确保同一时间只有一个选项被选中。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="radio" 
        v-model="selectedOption" 
        :value="option.value"
      >
      {{ option.label }}
    </label>
    <p>当前选择: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'A', label: '选项A' },
        { value: 'B', label: '选项B' },
        { value: 'C', label: '选项C' }
      ]
    }
  }
}
</script>

动态样式绑定

通过 :class 或 :style 实现选中状态的高亮效果。

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

<style scoped>
.active {
  background-color: #42b983;
  color: white;
}
</style>

表单验证集成

结合 Vuelidate 或原生验证实现必选校验。

<template>
  <form @submit.prevent="submit">
    <div v-for="option in options" :key="option.value">
      <input
        type="radio"
        v-model="selectedOption"
        :value="option.value"
        required
      >
      {{ option.label }}
    </div>
    <button type="submit">提交</button>
    <p v-if="!selectedOption" class="error">请至少选择一个选项</p>
  </form>
</template>

组件化封装

创建可复用的单选组件。

<!-- RadioGroup.vue -->
<template>
  <div class="radio-group">
    <slot :selected="modelValue" :update="updateValue"></slot>
  </div>
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  methods: {
    updateValue(value) {
      this.$emit('update:modelValue', value)
    }
  }
}
</script>

<!-- 使用方式 -->
<RadioGroup v-model="selectedOption">
  <template #default="{ selected, update }">
    <div 
      v-for="option in options"
      :class="{ active: selected === option.value }"
      @click="update(option.value)"
    >
      {{ option.label }}
    </div>
  </template>
</RadioGroup>

第三方库集成

使用像 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>

vue单选实现