vue组件实现单选按钮

在Vue中实现单选按钮可以使用组件来实现。下面是一个简单的示例：

1. 创建一个单选按钮组件：

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

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

2. 在父组件中使用该单选按钮组件：

<template>
  <div>
    <radio-buttons @change="handleOptionChange"></radio-buttons>
    <p>Selected Option: {{ selectedOption }}</p>
  </div>
</template>

<script>
import RadioButtons from './RadioButtons.vue';

export default {
  components: {
    RadioButtons
  },
  data() {
    return {
      selectedOption: null
    };
  },
  methods: {
    handleOptionChange(option) {
      this.selectedOption = option;
    }
  }
};
</script>

在上述示例中，我们创建了一个单选按钮组件`RadioButtons`，通过`v-for`指令循环渲染选项，并使用`v-model`指令绑定选中的值。在父组件中，我们引入了`RadioButtons`组件，并通过`@change`事件监听选项变化，将选中的值保存在父组件的`selectedOption`中。