html data-* 属性需用 javascript 主动读取并填入模态框，推荐用 dataset api（如dataset.userid）自动处理驼峰转换；监听 show.bs.modal 事件最稳妥，通过 e.relatedtarget 获取触发按钮的 dataset，并每次打开时重置表单值防残留。
HTML data-* 属性本身不会自动“传值”，它只是静态挂载在元素上的元数据；真正起作用的是你用 JavaScript 主动读取它，并手动填入模态框对应位置——这个过程必须显式编码，没有捷径。
怎么用 dataset 读取 data 属性
现代浏览器支持 element.dataset API，比 getAttribute('data-id') 更简洁、自动处理驼峰转换：
-
data-user-id="123"→el.dataset.userId（不是el.dataset.userid） -
data-payment-method="stripe"→el.dataset.paymentMethod - 注意：带连字符的 key 会被转成小驼峰，空值或缺失属性返回
undefined
为什么 show.bs.modal 是最稳妥的监听时机
Bootstrap 的 show.bs.modal 事件在模态框 DOM 已存在、但尚未显示时触发，此时你可以安全操作其内部元素。如果用 shown.bs.modal，有时会因渲染延迟导致表单字段还没 ready；如果用点击事件直接操作，又容易漏掉键盘触发（如 Enter 键激活 data-toggle="modal" 按钮）。
- 必须绑定在模态框本身上，不是按钮：
$('#myModal').on('show.bs.modal', function (e) { ... }) -
e.relatedTarget就是那个被点的按钮，它才有你要的dataset - 别在事件外提前缓存
relatedTarget，它只在该次事件中有效
填值时常见错误：ID 冲突和异步陷阱
多个按钮共用一个模态框时，最容易出问题的是目标字段选择器写死或没清空旧值：
- 不要用
$('#modal-input').val(...)—— 如果页面有多个同 ID 元素（比如循环生成），jQuery 只操作第一个 - 推荐用相对定位：
$(e.target).find('.modal-body input[name="id"]').val(id)，或给模态框加唯一 class 区分上下文 - 如果模态框内容是异步加载（
remote选项或手动load()），show.bs.modal触发时内容还没插入，得改用loaded.bs.modal或监听ajaxComplete
真正麻烦的从来不是读 data-*，而是确保填进去的值在用户提交前没被其他逻辑覆盖、没在模态框重复打开时残留上一次的数据——每次 show 都得重置，别图省事只做一次初始化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
