vue怎么实现单选

实现单选功能的方法

在Vue中实现单选功能可以通过多种方式，以下是几种常见的实现方法：

使用原生HTML单选按钮

通过v-model绑定数据，结合原生<input type="radio">实现单选：

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

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

使用组件库的单选组件

例如使用Element UI的el-radio组件：

<template>
  <div>
    <el-radio v-model="selectedOption" label="option1">Option 1</el-radio>
    <el-radio v-model="selectedOption" label="option2">Option 2</el-radio>
  </div>
</template>

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

自定义单选组件

通过自定义组件实现更灵活的单选逻辑：

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

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

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

注意事项

• 确保单选按钮的value属性唯一，避免冲突
• 使用v-model时，绑定的数据初始值建议设为空字符串或null
• 如果需要动态生成单选选项，可以通过v-for遍历数组实现
• 自定义样式时注意添加选中状态的视觉反馈

以上方法均可实现单选功能，选择哪种方式取决于项目需求和技术栈。原生HTML方式最轻量，组件库方式更美观且功能丰富，自定义组件灵活性最高。