vue如何实现单选功能

2026-02-23 14:31:12VUE

使用原生HTML单选按钮

在Vue中可以直接使用HTML原生的<input type="radio">元素实现单选功能。通过v-model实现数据绑定：

<template>
  <div>
    <input type="radio" id="option1" value="option1" v-model="selectedOption">
    <label for="option1">选项1</label>

    <input type="radio" id="option2" value="option2" v-model="selectedOption">
    <label for="option2">选项2</label>
  </div>
</template>

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

使用Vue组件库的单选按钮

主流UI库如Element UI、Ant Design Vue等都提供了单选组件：

<!-- Element UI -->
<template>
  <el-radio-group v-model="selectedOption">
    <el-radio label="option1">选项1</el-radio>
    <el-radio label="option2">选项2</el-radio>
  </el-radio-group>
</template>

<!-- Ant Design Vue -->
<template>
  <a-radio-group v-model="selectedOption">
    <a-radio value="option1">选项1</a-radio>
    <a-radio value="option2">选项2</a-radio>
  </a-radio-group>
</template>

自定义单选组件

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

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

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    modelValue: {
      type: String,
      default: ''
    }
  }
}
</script>

<!-- 使用方式 -->
<template>
  <RadioButton 
    v-model="selectedOption" 
    value="option1" 
    label="选项1" 
  />
  <RadioButton 
    v-model="selectedOption" 
    value="option2" 
    label="选项2" 
  />
</template>

动态生成单选选项

当选项数据来自API或需要动态生成时：

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

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

处理单选事件

可以通过@change事件监听选择变化：

<template>
  <input 
    type="radio" 
    value="option1" 
    v-model="selectedOption"
    @change="handleChange"
  >
</template>

<script>
export default {
  methods: {
    handleChange(event) {
      console.log('选中值:', event.target.value)
    }
  }
}
</script>

vue如何实现单选功能