当前位置：首页 > VUE

vue 实现单选

2026-01-12 09:08:01VUE

实现单选的基本方法

在Vue中实现单选功能可以通过v-model绑定数据和v-for循环渲染选项。以下是一个基本示例：

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

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    }
  }
}
</script>

使用组件化实现单选

可以创建可复用的单选组件：

<!-- RadioButton.vue -->
<template>
  <div>
    <input 
      type="radio" 
      :id="id" 
      :value="value" 
      v-model="modelValue"
      @change="$emit('update:modelValue', value)"
    />
    <label :for="id">{{ label }}</label>
  </div>
</template>

<script>
export default {
  props: {
    id: String,
    value: String,
    label: String,
    modelValue: String
  }
}
</script>

在父组件中使用

<template>
  <div>
    <RadioButton 
      v-for="option in options"
      :key="option.value"
      :id="option.value"
      :value="option.value"
      :label="option.label"
      v-model="selectedOption"
    />
  </div>
</template>

<script>
import RadioButton from './RadioButton.vue'

export default {
  components: { RadioButton },
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    }
  }
}
</script>

使用第三方UI库

许多UI库如Element UI、Vuetify等提供了现成的单选组件：

<!-- 使用Element UI -->
<template>
  <el-radio-group v-model="radio">
    <el-radio :label="1">选项1</el-radio>
    <el-radio :label="2">选项2</el-radio>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      radio: 1
    }
  }
}
</script>

样式定制

可以通过CSS为单选按钮添加自定义样式：

input[type="radio"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
}

input[type="radio"]:checked {
  border-color: #409eff;
}

input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: #409eff;
  border-radius: 50%;
  top: 2px;
  left: 2px;
}

表单验证

结合Vuelidate等验证库可以实现单选必选验证：

<template>
  <div>
    <div v-for="option in options" :key="option.value">
      <input 
        type="radio" 
        :id="option.value" 
        :value="option.value" 
        v-model="selectedOption"
        @blur="$v.selectedOption.$touch()"
      />
      <label :for="option.value">{{ option.label }}</label>
    </div>
    <span v-if="$v.selectedOption.$error">请选择一个选项</span>
  </div>
</template>

<script>
import { required } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' }
      ]
    }
  },
  validations: {
    selectedOption: { required }
  }
}
</script>

vue 实现单选