属性

标签属性看起来类似于 HTML（可选逗号），但其值只是常规 JavaScript。

（注意：本页面的示例使用管道字符 (|) 进行空白控制。）

<a href="//google.com">Google</a> <a class="button" href="//google.com">Google</a> <a class="button" href="//google.com">Google</a>

常规 JavaScript 表达式也可以正常工作

<body class="authed"></body>

多行属性

如果你有很多属性，你也可以将它们分散到多行

<input type="checkbox" name="agreement" checked="checked" />

如果你的 JavaScript 运行时支持 ES2015 模板字符串（包括 Node.js/io.js 1.0.0 及更高版本），你可以将该语法用于属性。这对于具有非常长值的属性非常有用

<input data-json=" { &quot;very-long&quot;: &quot;piece of &quot;, &quot;data&quot;: true } " />

带引号的属性

如果你的属性名称包含可能干扰 JavaScript 语法的奇异字符，请使用 "" 或 '' 对其进行引用，或使用逗号分隔不同的属性。此类字符的示例包括 [] 和 ()（经常在 Angular 2 中使用）。

index.pug:4:11 2| //- function call instead of a attribute name, 3| //- resulting in the unusual error. > 4| div(class='div-class' (click)='play()') -----------------^ 语法错误：赋值给右值

<div class="div-class" (click)="play()"></div> <div class="div-class" (click)="play()"></div>

属性插值

注意

Pug/Jade 的早期版本支持插值语法，例如

a(href="/#{url}") Link

此语法不再受支持。 以下提供了替代方案。（查看我们的迁移指南以了解 Pug v2 与早期版本之间的其他不兼容性。）

以下是一些可用于在属性中包含变量的替代方案

只需用 JavaScript 编写属性

- var url = 'pug-test.html'; a(href='/' + url) 链接 | | - url = 'https://example.com/' a(href=url) 另一个链接
<a href="/pug-test.html">链接</a> <a href="https://example.com/">另一个链接</a>
如果你的 JavaScript 运行时支持 ES2015 模板字符串（包括 Node.js/io.js 1.0.0 及更高版本），你还可以使用其语法来简化你的属性

- var btnType = 'info' - var btnSize = 'lg' button(type='button' class='btn btn-' + btnType + ' btn-' + btnSize) | | button(type='button' class=`btn btn-${btnType} btn-${btnSize}`)
<button class="btn btn-info btn-lg" type="button"></button> <button class="btn btn-info btn-lg" type="button"></button>

未转义的属性

默认情况下，所有属性都已转义，即特殊字符被转义序列替换，以防止攻击（例如跨站脚本）。如果你需要使用特殊字符，请使用 != 而不是 =。

<div escaped="&lt;code&gt;"></div> <div unescaped="<code>"></div>

注意

未转义的缓冲代码可能很危险。 你必须确保对所有用户输入进行清理，以避免跨站脚本。

布尔属性

布尔属性由 Pug 镜像。布尔值（true 和 false）被接受。当未指定值时，假定为 true。

<input type="checkbox" checked="checked" /> <input type="checkbox" checked="checked" /> <input type="checkbox" /> <input type="checkbox" checked="true" />

如果文档类型是 html，Pug 知道不镜像属性，而是使用简洁的样式（所有浏览器都理解）。

<!DOCTYPE html> <input type="checkbox" checked> <input type="checkbox" checked> <input type="checkbox"> <input type="checkbox" checked="checked">

样式属性

style 属性可以是一个字符串，就像任何普通属性一样；但它也可以是一个对象，这在通过 JavaScript 生成样式时非常方便。

<a style="color:red;background:green;"></a>

类属性

class 属性可以是一个字符串，就像任何普通属性一样；但它也可以是一个类名数组，这在通过 JavaScript 生成时非常方便。

<a class="foo bar baz"></a> <a class="bang foo bar baz bing"></a>

它也可以是一个将类名映射到 true 或 false 值的对象。这对于应用条件类非常有用

<a href="/">Home</a> <a class="active" href="/about">About</a>

类文字

可以使用 .classname 语法定义类

<a class="button"></a>

由于 div 是如此常见的标签选择，因此如果您省略标签名称，它将成为默认值

<div class="content"></div>

ID 文字

可以使用 #idname 语法定义 ID

<a id="main-link"></a>

由于 div 是如此常见的标签选择，因此如果您省略标签名称，它将成为默认值

<div id="content"></div>

&attributes

发音为“and attributes”，&attributes 语法可用于将对象分解为元素的属性。

<div id="foo" data-bar="foo" data-foo="bar"></div>

上面的示例使用了一个对象字面量。但您也可以使用其值为对象的变量。（另请参阅：Mixin Attributes）。

<div class="baz" id="foo" data-bar="foo"></div>

注意

使用 &attributes 应用的属性不会自动转义。您必须确保对任何用户输入进行清理，以避免跨站脚本 (XSS)。如果从 mixin 调用中传入 attributes，则会自动完成此操作。

属性

多行属性 ¶

带引号的属性 ¶

属性插值 ¶

注意

未转义的属性 ¶

注意

布尔属性 ¶

样式属性 ¶

类属性 ¶

类文字 ¶

ID 文字 ¶

&attributes ¶

注意