在 Pug 模板里处理 HTML 的 data-* 属性非常直观，既能在模板层静态写出，也能借助变量动态生成，随后在浏览器或后端逻辑中正常读取。掌握这套写法可以避免手动拼接字符串带来的低级错误。
一、在 Pug 中书写 data-* 属性
Pug 把标签后面的括号内容当成属性集合，data 开头的属性可以直接写成连字符形式，也可以写成嵌套对象。下面给出两种等价写法：
// 写法一：连字符写法
div(data-user-id="1001" data-role="admin") 用户信息
// 写法二：对象嵌套写法
div(data={user-id: "1001", role: "admin"}) 用户信息
渲染后的 HTML 结果
<div data-user-id="1001" data-role="admin">用户信息</div>
二、动态绑定变量
当属性值来自后端渲染数据时，直接使用 Pug 的插值语法即可，注意变量要用等号引导：
- var uid = 2002 - var role = "editor" div(data-user-id=uid data-role=role)
循环中的 data 属性
在列表渲染时给每一项绑定不同数据，常用于前端事件代理：
ul
each item in [{id: 1, name: "张三"}, {id: 2, name: "李四"}]
li(data-id=item.id data-name=item.name)= item.name
三、在浏览器中访问 data-* 属性
标准 HTML 的 dataset 接口可以读取这些属性，属性名去掉 data- 并把短横线转成驼峰：
// 假设页面中有 <div id="box" data-user-id="1001"></div>
var el = document.getElementById("box");
console.log(el.dataset.userId); // 输出 1001
四、常见错误与注意点
- 不要把 data-* 写成
<input>这类标签形式，它只是属性不是标签。 - 使用对象写法时，键名里的短横线必须加引号，否则 Pug 会解析失败。
- 若属性值包含特殊字符，Pug 会自动转义，无需手动处理。
五、小结对照表
| 场景 | Pug 写法 | JS 读取 |
|---|---|---|
| 静态属性 | div(data-a="1") | el.dataset.a |
| 动态变量 | div(data-a=val) | el.dataset.a |
| 对象写法 | div(data={a: "1"}) | el.dataset.a |
只要记住 Pug 中 data-* 就是普通属性，配合 dataset 接口就能在前后端顺畅传递结构化标记数据。
Pugdata_*_attributesHTML修改时间：2026-07-31 05:24:17