最稳妥的方式是用 getattribute() 读取 data 属性做判断，因其兼容性好、不依赖命名规范；dataset 仅支持全小写+连字符格式（如 data-user-id），其他写法静默失效，且动态插入元素的 dataset 不会自动同步。
直接用 getAttribute() 读取 data 属性值做条件判断最稳妥，别依赖 dataset——它在命名不规范、含数字或大小写混用时会静默返回 undefined，导致判断失效。
用 getAttribute() 判断 data 属性是否存在或等于某值
这是最直白、兼容性最好的方式。浏览器不管属性名怎么写，只要 HTML 里写了，getAttribute() 就能原样读出来。
- 判断是否存在：
el.hasAttribute('data-disabled')比el.dataset.disabled !== undefined更准确，避免驼峰转换失败干扰 - 判断值是否匹配：
el.getAttribute('data-role') === 'admin'，注意是严格相等（===），不是赋值（=） - 常见错误：把
if (value = attr)写成赋值语句，结果条件恒为真，逻辑完全失控 - 服务端渲染的 JSON 字符串必须用
JSON.parse(el.getAttribute('data-config'))，且要加try/catch，否则解析失败直接报错
用 dataset 前先确认命名是否合规
dataset 只对符合「全小写+连字符」格式的 data 属性名生效，比如 data-user-id → dataset.userId。其他写法一律失效。
- 这些写法都无效：
data-userId、data-user_id、data-1st-load、data-apiKey—— 浏览器不会映射到dataset，也不会报错，只会返回undefined - 动态插入的元素（如通过
innerHTML拼接），其dataset不会自动同步新属性，得手动调用setAttribute - 布尔值判断不能靠
if (el.dataset.active)，因为"false"也是真值；应写成el.dataset.active === 'true'
结合事件监听做表单条件分支
纯 HTML 无法实现字段显隐切换，必须靠 JS 监听事件并控制 display 或 hidden，同时同步更新 required 属性。
- 监听
change（下拉框、单选/复选框）或input（文本框），而不是click - 用
data-trigger和data-target区分语义，比如data-trigger="payment-method"控制data-target="credit-card-fields" - 显示字段时设
el.required = true，隐藏时设el.required = false，否则提交校验会出错 - CSS 的
:has()还没普及，别指望靠它实现条件样式
真正容易被忽略的是：data 属性只适合存静态上下文信息，比如埋点 ID、SKU、初始配置；别把它当状态管理工具——频繁读写会触发重排，动态变化的数据该用 JS 变量或 Map 缓存。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
