v-model 是 vue 封装的语法糖，通过 :value 和 @input（或 @change）实现双向绑定；在 bootstrap 5 中需绑定到原生表单元素本身，禁用 dom 直查，所有字段须声明于响应式数据中。
Bootstrap 5 表单本身不依赖 Vue，但和 Vue 配合使用时，v-model 与 Bootstrap 5 的 class 体系、表单控件结构天然兼容——关键不是“能不能用”，而是“别手动操作 DOM 值”。
为什么不能直接用 document.querySelector().value 取值
Vue 的响应式系统靠数据驱动视图，一旦你绕过 v-model 去查 DOM，就等于放弃 Vue 的核心优势。比如：document.getElementById('email').value 拿到的是快照值，后续表单变化不会触发 Vue 的 watch 或重新渲染；更严重的是，在服务端渲染（如 Nuxt）或 SSR 场景下，DOM 可能根本不存在。
- 所有表单字段必须在
data()或setup()中声明初始值 - 每个
<input>、<select></select>、<textarea></textarea>必须绑定v-model，哪怕只是空字符串 - Bootstrap 5 的
form-control、form-select等 class 不影响v-model工作，只管样式和可访问性
v-model 在 Bootstrap 5 表单中的典型写法
Bootstrap 5 移除了对 jQuery 的依赖，所有交互靠原生事件，这反而让 v-model 更干净。注意几个易错点：
-
<input type="checkbox">和<input type="radio">：必须设value属性，否则v-model绑定布尔值或字符串会出错 -
<select multiple></select>：v-model必须是数组，不能是字符串 - 禁用状态（
disabled）下，v-model不再同步——这是浏览器行为，不是 Vue 问题；如需保留值，改用readonly+ CSS 灰色样式
示例：
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
<div class="mb-3"> <label class="form-label">邮箱</label> <input type="email" class="form-control" v-model="formData.email"> </div> <div class="mb-3"> <label class="form-label">角色</label> <select class="form-select" v-model="formData.role"><option value="" disabled>请选择</option> <option value="admin">管理员</option> <option value="user">普通用户</option></select> </div>
验证失败时，如何用 Bootstrap 5 的 is-invalid 类联动 Vue 状态
Bootstrap 5 的表单验证样式（如 is-invalid、invalid-feedback）需要手动控制 class，不能靠 v-model 自动触发。常见做法是用计算属性或 watch 判断字段有效性，再绑定 :class：
- 不要在模板里写
is-invalid硬编码，它应该由校验逻辑动态决定 - 错误提示文本也应从校验结果中取，而不是写死在 HTML 里
- 提交前集中校验比每个输入框实时校验更轻量，尤其字段多时
例如：
<div :class="['mb-3', { 'is-invalid': errors.email }]">
<label class="form-label">邮箱</label>
<input type="email" class="form-control" v-model="formData.email"><div class="invalid-feedback">{{ errors.email }}</div>
</div>
避免用 Bootstrap-Vue 或 Bootstrap 4 兼容层
当前（2026 年），Bootstrap 5 官方已无 jQuery 依赖，而 bootstrap-vue 项目早在 2023 年就停止维护，且不支持 Vue 3 Composition API；bootstrap-vue-3 社区活跃度低、文档残缺。直接用原生 Bootstrap 5 CSS + Vue 原生指令，是最稳定、最可控的选择。
真正容易被忽略的点是：Bootstrap 5 的 form-check（复选框/单选组）需要包裹 <input> 的 <div> 上加 <code>v-model 绑定——不行，必须绑在 <input> 本身；否则 Vue 无法捕获 change 事件。
