vue 实现单选

Vue 实现单选功能

在 Vue 中实现单选功能通常可以通过 v-model 绑定数据和 input 或 radio 元素结合实现。以下是几种常见的方法：

使用原生 radio 输入

通过 v-model 绑定一个变量，将多个 radio 的 value 属性设置为不同的值，当用户选择时，绑定的变量会自动更新为当前选中的 value。

<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>
    <label>
      <input type="radio" v-model="selectedOption" value="option3" />
      Option 3
    </label>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

使用组件库的单选组件

许多 UI 组件库（如 Element UI、Ant Design Vue）提供了封装好的单选组件，使用方式更简洁。

以 Element UI 为例：

<template>
  <div>
    <el-radio-group v-model="selectedOption">
      <el-radio label="option1">Option 1</el-radio>
      <el-radio label="option2">Option 2</el-radio>
      <el-radio label="option3">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="{ active: selectedOption === option.value }"
    >
      {{ option.label }}
    </div>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ]
    };
  },
  methods: {
    selectOption(value) {
      this.selectedOption = value;
    }
  }
};
</script>

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

动态生成单选选项

如果选项是动态的，可以通过 v-for 动态渲染单选按钮。

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

<script>
export default {
  data() {
    return {
      selectedOption: '',
      dynamicOptions: [
        { id: 1, name: 'Dynamic Option 1' },
        { id: 2, name: 'Dynamic Option 2' },
        { id: 3, name: 'Dynamic Option 3' }
      ]
    };
  }
};
</script>

以上方法可以根据实际需求选择使用，原生 radio 适合简单场景，组件库提供更丰富的功能，而自定义组件则适合高度定制化的需求。