v-model通过同名变量和value值实现单选按钮分组绑定，需同时满足：绑定同一v-model变量、name属性相同、value值互异；name不可省略，否则分组失效。
v-model 通过 相同的绑定变量名 和 统一的 value 值 实现单选按钮分组绑定，本质是让多个 <input type="radio"> 共享一个响应式数据源，用户只能选中其中一项，选中项的 value 会自动赋给该变量。
单选按钮分组的关键规则
要让多个单选按钮构成一组、互斥选择，必须同时满足以下三点：
- 所有按钮绑定同一个
v-model变量（例如v-model="picked"） - 所有按钮具有相同的
name属性（如name="level"），这是浏览器原生分组依据 - 每个按钮的
value属性值互不相同，代表该选项的实际提交值
基础写法示例
下面是一个典型分组结构：
<div id="app">
<input type="radio" name="level" value="junior" v-model="picked"> 初级
<input type="radio" name="level" value="middle" v-model="picked"> 中级
<input type="radio" name="level" value="senior" v-model="picked"> 高级
<p>当前选中：{{ picked }}</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5039" title="check-vue-style"><img
src="https://img.php.cn/upload/skill/000/000/081/179032142844293.jpg" alt="check-vue-style" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5039" title="check-vue-style" class="overflowclass">check-vue-style</a>
<p class="overflowclass">检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5039" title="check-vue-style" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</div>
对应脚本中需初始化 picked 为字符串类型（如空字符串或默认值）：
const app = {
data() {
return {
picked: '' // 或 'junior' 作为默认选中项
}
}
}
注意 name 属性不可省略
虽然 Vue 3 的 v-model 不依赖 name 来完成数据同步，但浏览器渲染和表单提交仍需它来识别分组。缺少 name 会导致多个单选按钮各自独立、可同时选中，破坏单选逻辑。
Vue 不会自动补全或警告缺失的 name，这是开发者必须手动确保的 HTML 规范要求。
与复选框的本质区别
单选按钮绑定的是**单一字符串值**，而复选框（多个时）绑定的是**数组**。这意味着：
- 单选按钮的
v-model变量不能是数组，否则会报错或行为异常 - 初始值应为字符串（如
''、'option1'），不是布尔值或数组 - 未选中任何项时，变量值保持初始状态，不会自动变为
null或undefined
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
