data属性写在button标签内需以data-开头、全小写、连字符分隔，如删除；js中通过dataset.userid读取（自动驼峰转换），值恒为字符串。
data属性写在button标签里怎么写
直接在 <button></button> 标签内加 data-* 属性就行，比如传用户ID或操作类型。浏览器会自动把带连字符的命名转成驼峰（如 data-user-id → dataset.userId），但注意只支持字母、数字、连字符和下划线，不能用空格或中文。
常见错误：写成 data-id="123" 但 JS 里误读为 dataset.id —— 实际没问题；但如果写成 data-user_id="123"（下划线），JS 里就变成 dataset.user_id，不是 dataset.userId，这点容易踩坑。
示例：
<button data-user-id="456" data-action="delete" data-priority="high">删除</button>
JavaScript怎么读取button的data值
用 .dataset 属性最方便，返回一个 DOMStringMap 对象。它会自动处理连字符转驼峰，但只对合法命名生效。
-
button.dataset.userId→"456"（对应data-user-id） -
button.dataset.action→"delete"（对应data-action） -
button.dataset.priority→"high"（对应data-priority）
别用 getAttribute('data-user-id')，虽然能读，但绕过 dataset 的自动转换逻辑，也不如它语义清晰。另外注意：dataset 返回的全是字符串，哪怕你写了 data-count="10"，读出来也是 "10"，要转数字得自己 parseInt()。
点击按钮时如何拿到当前按钮的data值
绑定事件监听器时，用 event.target 拿到被点的按钮，再取它的 dataset。关键点是别用 this——如果用箭头函数或事件委托，this 可能不是 button。
正确写法：
document.addEventListener('click', function (e) {
if (e.target.matches('button[data-user-id]')) {
const btn = e.target;
console.log(btn.dataset.userId); // "456"
console.log(btn.dataset.action); // "delete"
}
});
容易漏的点：
- 没做
matches()或instanceof HTMLButtonElement判断，导致点到 button 内部文字或图标时e.target是子元素，没有 dataset - 用了事件委托但 selector 写成
'button'却忘了 data 属性可能不存在，结果读undefined.userId报错
data属性能存复杂数据吗？比如对象或数组
不能直接存。HTML 属性值只能是字符串，所以 data-config='{"a":1}' 看似可以，但实际要手动 JSON.parse()，而且引号容易冲突（单双引号嵌套麻烦）、可读性差、易出错。
更稳妥的做法：
- 简单结构用多个 data 属性拆开，比如
data-api-url+data-api-method - 真需要对象/数组，优先考虑用
id关联到页面上隐藏的<script type="application/json"></script>块里 - 或者用
JSON.stringify()存、JSON.parse()读，但必须确保字符串内容已转义（比如用encodeURIComponent包一层再存，读时再解码）
典型翻车现场：data-info='{"name":"张三","tag":"前端"}' —— 如果 name 里有单引号或换行，HTML 解析直接失败，按钮可能不渲染或 dataset 为空。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
