属性(Attributes)

¥Attributes

标签属性看起来与 HTML 类似（带有可选逗号），但它们的值只是常规 JavaScript。

¥Tag attributes look similar to HTML (with optional commas), but their values are just regular JavaScript.

（注：本页示例使用管道字符 (|) 代表空白控制。）

¥(NOTE: Examples on this page use the pipe character (|) for whitespace control.)

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

普通的 JavaScript 表达式也可以正常工作：

¥Normal JavaScript expressions work fine, too:

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

多行属性(Multiline Attributes)

¥Multiline Attributes

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

¥If you have many attributes, you can also spread them across many lines:

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

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

¥If your JavaScript runtime supports ES2015 template strings (including Node.js/io.js 1.0.0 and later), you can use that syntax for attributes. This is really useful for attributes with really long values:

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

引用属性(Quoted Attributes)

¥Quoted Attributes

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

¥If your attribute name contains odd characters that might interfere with JavaScript syntax, either quote it using "" or '', or use commas to separate different attributes. Examples of such characters include [] and () (frequently used in 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()')
-----------------^

Syntax Error: Assigning to rvalue

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

属性插值(Attribute Interpolation)

¥Attribute Interpolation

注意

以前版本的 Pug/Jade 支持插值语法，例如：

¥Previous versions of Pug/Jade supported an interpolation syntax such as:

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

不再支持此语法。替代方案如下。（查看我们的迁移指南，了解有关 Pug v2 和以前版本之间其他不兼容性的更多信息。）

¥This syntax is no longer supported. Alternatives are found below. (Check our migration guide for more information on other incompatibilities between Pug v2 and previous versions.)

你可以使用以下一些替代方法在属性中包含变量：

¥Here are some alternatives you can use to include variables in your attribute:

只需在 JavaScript 中编写属性：

¥Simply write the attribute in JavaScript:

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

¥If your JavaScript runtime supports ES2015 template strings (including Node.js/io.js 1.0.0 and later), you can also use its syntax to simplify your attributes:

- 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>

未转义的属性(Unescaped Attributes)

¥Unescaped Attributes

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

¥By default, all attributes are escaped—that is,special characters are replaced with escape sequences—to prevent attacks (such as cross site scripting). If you need to use special characters, use != instead of =.

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

注意

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

¥Unescaped buffered code can be dangerous. You must be sure to sanitize any user inputs to avoid cross-site scripting.

布尔属性(Boolean Attributes)

¥Boolean Attributes

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

¥Boolean attributes are mirrored by Pug. Boolean values (true and false) are accepted. When no value is specified true is assumed.

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

如果 doctype 是 html，Pug 知道不镜像该属性，而是使用简洁样式（所有浏览器都能理解）。

¥If the doctype is html, Pug knows not to mirror the attribute, and instead uses the terse style (understood by all browsers).

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

风格属性(Style Attributes)

¥Style Attributes

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

¥The style attribute can be a string, like any normal attribute; but it can also be an object, which is handy when styles are generated by JavaScript.

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

类属性(Class Attributes)

¥Class Attributes

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

¥The class attribute can be a string, like any normal attribute; but it can also be an array of class names, which is handy when generated from JavaScript.

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

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

¥It can also be an object which maps class names to true or false values. This is useful for applying conditional classes

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

类字面量(Class Literal)

¥Class Literal

类可以使用 .classname 语法定义：

¥Classes may be defined using a .classname syntax:

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

由于 div 是一种常见的标签选择，因此如果省略标签名称，它就是默认值：

¥Since div's are such a common choice of tag, it is the default if you omit the tag name:

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

ID 字面量(ID Literal)

¥ID Literal

ID 可以使用 #idname 语法定义：

¥IDs may be defined using a #idname syntax:

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

由于 div 是一种常见的标签选择，因此如果省略标签名称，它就是默认值：

¥Since div's are such a common choice of tag, it is the default if you omit the tag name:

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