vue 单选组合 实现

Vue 单选组合实现

在 Vue 中实现单选组合可以通过多种方式完成，常见的方法包括使用原生 HTML 的 <input type="radio"> 结合 Vue 的数据绑定，或使用第三方组件库（如 Element UI、Ant Design Vue）提供的单选组件。

原生 HTML 实现

使用原生 HTML 的 <input type="radio"> 结合 Vue 的 v-model 实现单选功能：

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

通过 v-model 绑定到 selectedOption，单选按钮的值会动态更新到 selectedOption。

使用 Element UI 的单选组件

如果项目中使用了 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>
    <el-radio v-model="selectedOption" label="option3">Option 3</el-radio>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

使用 Ant Design Vue 的单选组件

如果使用 Ant Design Vue，可以通过 a-radio 或 a-radio-group 实现：

<template>
  <div>
    <a-radio-group v-model="selectedOption">
      <a-radio value="option1">Option 1</a-radio>
      <a-radio value="option2">Option 2</a-radio>
      <a-radio value="option3">Option 3</a-radio>
    </a-radio-group>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

动态生成单选按钮

如果需要根据数据动态生成单选按钮，可以使用 v-for：

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input type="radio" v-model="selectedOption" :value="option.value" />
      {{ option.label }}
    </label>
    <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' }
      ]
    };
  }
};
</script>

自定义单选组件

如果需要更复杂的逻辑或样式，可以封装一个自定义的单选组件：

<template>
  <div>
    <div
      v-for="option in options"
      :key="option.value"
      class="custom-radio"
      :class="{ active: selectedOption === option.value }"
      @click="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' }
      ]
    };
  }
};
</script>

<style>
.custom-radio {
  padding: 8px;
  border: 1px solid #ccc;
  margin: 4px;
  cursor: pointer;
}
.custom-radio.active {
  background-color: #409eff;
  color: white;
}
</style>

通过以上方法，可以根据需求选择适合的方式实现 Vue 中的单选组合功能。