用同一响应式变量绑定多个单选框即可实现自动联动，选中一个其余自动取消；需确保各radio的value不同，建议保留name属性以保障可访问性，动态渲染时v-for必须用唯一key。
用 v-model 绑定同一个响应式变量，就能让多个单选框自动联动——选中一个，其余自动取消，无需手动处理事件或状态。
用同一变量绑定所有单选项
Vue 的单选框（<input type="radio">）天然支持“同名互斥”，但必须配合 v-model 指向同一个响应式数据才能实现 Vue 层面的双向联动：
- 在 data 或 setup 中定义一个响应式变量（如
selectedValue） - 所有 radio 的
v-model都绑定它，且每个 radio 的value设为不同值 - 选中变化时，变量值自动更新；变量值改变时，对应 radio 自动被选中
避免常见坑：name 属性不是必须的
Vue 2/3 中，v-model 已接管单选逻辑，name 属性可省略（浏览器原生仍需 name 才能互斥，但 Vue 会自动补全）。但建议保留，增强语义和可访问性：
- 写法示例：
<input type="radio" v-model="selectedValue" name="status" value="active"> - 不写
name也能联动，但表单提交或屏幕阅读器支持可能受影响 - 多个单选组（如“状态”和“类型”）必须用不同变量绑定，否则会意外联动
结合 computed 简化初始值与校验
初始值未设置时，单选框默认无选中；可用 computed 封装默认逻辑或联动判断：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
- 设置默认值：
selectedValue: ref('active')（setup）或data() { return { selectedValue: 'active' } } - 联动其他字段：比如选中 “自定义” 时显示输入框，用
v-if="selectedValue === 'custom'"即可 - 校验是否已选择：直接判断
!selectedValue，比监听 change 事件更简洁
动态生成单选组？v-for 要加 key
用 v-for 渲染选项列表时，必须为每个 radio 设置唯一 :key，否则切换选项可能复用 DOM 导致状态错乱：
- 正确写法：
v-for="item in options" :key="item.value" -
value最适合作为 key（需保证唯一），避免用 index - 确保
options是响应式数组，新增/删除项时 UI 自动更新
不复杂但容易忽略。核心就一条：同一变量 + 不同 value + 响应式基础，联动自然成立。
