Vue中单选按钮怎么写

在Vue.js中，创建单选按钮通常使用HTML的`<input>`标签配合v-model指令来实现双向数据绑定。下面是一个基本的例子：

<!-- HTML模板 -->
<template>
  <div>
    <label v-for="item in options" :key="item.value">
      <input type="radio"
             :name="groupName"
             :value="item.value"
             v-model="selectedValue">
      {{ item.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项一' },
        { value: 'option2', label: '选项二' },
        { value: 'option3', label: '选项三' }
      ],
      selectedValue: ''
    };
  },
};
</script>

在这个例子中：
- `options` 数组存储了所有可选的选项及其对应的值。
- `v-model` 将用户选择的值绑定到组件的`selectedValue`属性上。
- 每个`<input>`标签的`type="radio"`表示这是一个单选框，`:name="groupName"`用于确保所有的单选按钮属于同一个组，以便在表单提交时只有一个会被选中。

当你切换选择时，`selectedValue`的值会自动更新，反之亦然。