用同一响应式变量绑定多个单选框即可实现自动联动，选中一个其余自动取消；需确保各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 会自动补全）。但建议保留，增强语义和可访问性：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 写法示例：<input type="radio" v-model="selectedValue" name="status" value="active">
• 不写 name 也能联动，但表单提交或屏幕阅读器支持可能受影响
• 多个单选组（如“状态”和“类型”）必须用不同变量绑定，否则会意外联动

结合 computed 简化初始值与校验

初始值未设置时，单选框默认无选中；可用 computed 封装默认逻辑或联动判断：

• 设置默认值：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 + 响应式基础，联动自然成立。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！