vue 实现单选

实现单选功能的方法

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

使用原生HTML单选按钮

通过v-model绑定数据，实现单选功能。以下是一个简单的示例：

<template>
  <div>
    <input type="radio" id="option1" value="Option 1" v-model="selectedOption">
    <label for="option1">Option 1</label>
    <input type="radio" id="option2" value="Option 2" v-model="selectedOption">
    <label for="option2">Option 2</label>
    <input type="radio" id="option3" value="Option 3" v-model="selectedOption">
    <label for="option3">Option 3</label>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

使用Vue组件库（如Element UI）

如果使用Element UI等UI框架，可以直接使用其提供的单选组件：

<template>
  <div>
    <el-radio-group v-model="selectedOption">
      <el-radio label="Option 1"></el-radio>
      <el-radio label="Option 2"></el-radio>
      <el-radio label="Option 3"></el-radio>
    </el-radio-group>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

自定义单选组件

可以创建一个自定义的单选组件，提供更灵活的控制：

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

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectedOption: this.value
    }
  },
  methods: {
    selectOption(value) {
      this.selectedOption = value
      this.$emit('input', value)
    }
  }
}
</script>

<style>
.selected {
  background-color: #f0f0f0;
}
</style>

动态生成单选选项

如果需要动态生成单选选项，可以使用v-for指令：

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

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { id: 'opt1', value: 'Value 1', label: 'Label 1' },
        { id: 'opt2', value: 'Value 2', label: 'Label 2' },
        { id: 'opt3', value: 'Value 3', label: 'Label 3' }
      ]
    }
  }
}
</script>

以上方法可以根据具体需求选择使用，原生HTML单选按钮适合简单场景，UI框架组件适合快速开发，自定义组件则提供更高的灵活性。