属性
标签属性看起来与 HTML 类似(带有可选逗号),但它们的值只是常规 JavaScript。
(注:本页示例使用管道字符 (|
) 代表 空白控制。)
普通的 JavaScript 表达式也可以正常工作:
多行属性
如果你有很多属性,你也可以将它们分散到多行中:
如果你的 JavaScript 运行时支持 ES2015 模板字符串(包括 Node.js/io.js 1.0.0 及更高版本),你可以使用该语法作为属性。这对于具有很长值的属性非常有用:
引用属性
如果你的属性名称包含可能干扰 JavaScript 语法的奇怪字符,请使用
""
或''
引用它,或使用逗号分隔不同的属性。此类字符的示例包括[]
和()
(Angular 2
中经常使用)。
属性插值
注意
以前版本的 Pug/Jade 支持插值语法,例如:
a(href="/#{url}")Link
不再支持此语法。替代方案如下。(查看我们的迁移指南,了解有关 Pug v2 和以前版本之间其他不兼容性的更多信息。)
你可以使用以下一些替代方法在属性中包含变量:
-
只需在 JavaScript 中编写属性:
-
如果你的 JavaScript 运行时支持 ES2015 模板字符串(包括 Node.js/io.js 1.0.0 及更高版本),你还可以使用其语法来简化你的属性:
未转义的属性
默认情况下,所有属性都会被转义,即将特殊字符替换为转义序列,以防止攻击(例如跨站点脚本)。如果需要使用特殊字符,请使用!=
而不是=
。
注意
未转义的缓冲代码可能很危险。你必须确保清理所有用户输入以避免跨站脚本。
布尔属性
布尔属性由 Pug 镜像。接受布尔值(true
和false
)。当未指定值时,假定为true
。
如果 doctype 是 html
,Pug 知道不镜像该属性,而是使用简洁样式(所有浏览器都能理解)。
风格属性
style
属性可以是一个字符串,就像任何普通属性一样;但它也可以是一个对象,这在 JavaScript 生成样式时很方便。
类属性
class
属性可以是一个字符串,就像任何普通属性一样;但它也可以是类名数组,这在从 JavaScript 生成时很方便。
它也可以是将类名映射到true
或false
值的对象。这对于应用条件类很有用
类字面量
类可以使用.classname
语法定义:
由于div
是一种常见的标签选择,因此如果省略标签名称,它就是默认值:
ID 字面量
ID 可以使用 #idname
语法定义:
由于div
是一种常见的标签选择,因此如果省略标签名称,它就是默认值:
&属性
&attributes
语法发音为 “和属性”,可用于将对象分解为元素的属性。
上面的例子使用了对象字面量。但你也可以使用值为对象的变量。(另见:混入属性)。
注意
使用&attributes
应用的属性不会自动转义。你必须确保清理所有用户输入以避免跨站脚本
(XSS)。如果从 mixin 调用传入 attributes
,这是自动补齐的。