v-model绑定单选按钮需用响应式字符串变量，初始值必须为字符串（如''、'junior'），不可为null/undefined/布尔值/数组；html中name属性必须一致以保证单选逻辑；value值须匹配变量预期值；未选中时变量保持初始值不变。
v-model 绑定单选按钮时，核心是让一个响应式字符串变量与多个 <input type="radio"> 共享同一个绑定源，且只能有一个被选中。它不是绑定布尔值或数组，而是绑定单一字符串值，初始值必须是字符串（如 ''、'junior'），不能是 null、undefined 或数组。
确保响应式变量正确声明
使用 ref 或 reactive 包裹字符串值，保证响应性：
-
推荐用 ref：适合简单字段，例如
const picked = ref('')或默认选中项const picked = ref('senior') -
若在 reactive 对象中：如
const form = reactive({ picked: '' })，v-model 可直接写为v-model="form.picked" - ⚠️ 初始值不能是
false、true或[]，否则会触发警告或行为异常
HTML 结构必须带 name 属性
虽然 v-model 不依赖 name 同步数据，但浏览器靠 name 将单选按钮识别为同一组。缺失 name 会导致多个按钮可同时选中，破坏单选逻辑：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 每个 radio 都要写
name="role"（值一致） - value 值应与响应式变量预期值匹配，例如：
value="junior"、value="senior" - 示例片段：
<input type="radio" name="role" value="junior" v-model="picked"> 初级<br>
<input type="radio" name="role" value="senior" v-model="picked"> 高级
动态获取或修改当前选中值
v-model 绑定的是响应式引用本身，所以任何时候访问 picked.value（ref）或 form.picked（reactive）都能拿到最新值：
- 在事件中直接读取：
console.log(picked.value) - 设置新值也只需赋值：
picked.value = 'intern' - 如果在
v-for中渲染选项，务必绑定到响应式对象属性路径（如v-model="form.picked"），不要解构出普通字符串再绑定
未选中时的值保持不变
Vue 不会自动将未选中状态设为 null 或 undefined。如果初始是 ref('')，且用户始终没点任何单选按钮，picked.value 就一直是空字符串：
- 如需“未选”有明确语义，可初始化为特殊字符串，如
ref('not-selected') - 表单提交前建议校验：
if (picked.value === '') { alert('请选择职位级别') } - 注意：这和复选框不同——复选框未勾选时布尔值为
false，而单选按钮不选就是初始值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
