data-*属性仅支持并列写多个字符串参数，不支持绑定或解析结构；需用setattribute动态添加，dataset读取后须显式类型转换，事件委托可统一处理多参数。
data-* 属性本身不支持“绑定”，只支持并列写多个字符串参数
HTML 的 data-* 属性不是响应式数据管道，更不是函数参数列表。所谓“绑定多个扩展参数”，实际就是在一个元素上写多个合法的 data-* 属性，每个都独立存储一个字符串值。浏览器不做合并、不解析结构、不校验类型——它只是原样保留。
常见错误是试图用一个属性塞 JSON 或用下划线/驼峰命名，结果 JS 读不到：
-
data-config='{"id":123,"type":"save"}'→ 解析成本高、易引号冲突、无法被dataset自动映射 -
data-userId="1024"→ 浏览器忽略该属性（命名不合法），dataset.userId返回undefined -
data-user_id="1024"→ 同样非法，下划线不被支持
正确做法是拆成语义清晰、可独立读取的多个属性：
<button data-action="submit" data-form-id="login" data-api-endpoint="/api/auth" data-method="POST"> 登录 </button>
dataset 如何安全读取多个参数并做类型转换
dataset 是只读映射，所有值都是字符串。直接拼接或比较会出错，必须逐个转换。
-
element.dataset.action→ 得到"submit"（字符串） -
element.dataset.formId→ 对应 HTML 中的data-form-id，自动转驼峰 -
element.dataset.apiEndpoint→ 对应data-api-endpoint，不是data-apiEndpoint - 数字字段如
data-count="42"，需parseInt(element.dataset.count, 10)，不能直接+element.dataset.count - 布尔字段如
data-disabled="true"，必须用element.dataset.disabled === 'true'，不能用!!element.dataset.disabled
动态添加多个 data-* 参数时，setAttribute 是唯一可靠方式
运行时想加新参数，不能靠赋值 dataset.xxx，它不会写入 DOM：
- ❌
el.dataset.timestamp = Date.now().toString()→ DOM 不更新，后续序列化（如el.outerHTML）里看不到 - ✅
el.setAttribute('data-timestamp', Date.now().toString())→ 真实写入，CSS 选择器、其他 JS 模块都能读到 - ✅
el.setAttribute('data-retry-count', '3')→ 多个参数可连续调用，互不影响 - 删除用
el.removeAttribute('data-timestamp')，不是delete el.dataset.timestamp
注意：新增后，下次访问 dataset 就能读到新值，但没有事件通知机制——别指望自动触发重渲染。
用事件委托统一处理多个 data-* 参数的典型场景
避免给每个按钮单独绑定，用 document 级委托提取全部参数：
document.addEventListener('click', (e) => {
const btn = e.target.closest('[data-action]');
if (!btn) return;
<p>const { action, formId, apiEndpoint, method } = btn.dataset;
// 所有值都是字符串，需按需转换：
const count = parseInt(btn.dataset.retryCount || '0', 10);
const disabled = btn.dataset.disabled === 'true';</p><p>if (action === 'submit' && !disabled) {
fetch(apiEndpoint, { method }).then(/<em> ... </em>/);
}
});</p>
这种模式天然支持跨页面复用逻辑：只要按钮带相同 data-* 命名约定，同一段 JS 就能驱动登录页、注册页、重置页。
真正容易被忽略的是类型转换的时机和一致性——所有 dataset 值在进入业务逻辑前，必须完成显式转换，不能依赖隐式 coercion，否则 "0"、"false"、空字符串都会变成 true。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
