属性

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

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

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

多行属性

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

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

引用属性

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

属性插值

注意

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

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

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

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

  1. 只需在 JavaScript 中编写属性:

  2. 如果你的 JavaScript 运行时支持 ES2015 模板字符串(包括 Node.js/io.js 1.0.0 及更高版本),你还可以使用其语法来简化你的属性:

未转义的属性

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

注意

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

布尔属性

布尔属性由 Pug 镜像。接受布尔值(truefalse)。当未指定值时,假定为true

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

风格属性

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

类属性

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

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

类字面量

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

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

ID 字面量

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

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

&属性

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

上面的例子使用了对象字面量。但你也可以使用值为对象的变量。(另见:混入属性)。

注意

使用&attributes应用的属性不会自动转义。你必须确保清理所有用户输入以避免跨站脚本 (XSS)。如果从 mixin 调用传入 attributes,这是自动补齐的。

Pug 中文文档 - 粤ICP备14034220号-1