免費(fèi)AI編程助手
Pug 屬性
屬性 Attribute
標(biāo)簽屬性和 HTML 語(yǔ)法非常相似，但它們的值就是普通的 JavaScript 表達(dá)式。您可以用逗號(hào)作為屬性分隔符，不過不加逗號(hào)也是允許的。
（注意：本頁(yè)的示例中，包含管道符號(hào) | 的行是用于控制空格的。）
a(href='baidu.com') 百度
|
|
a(class='button' href='baidu.com') 百度
|
|
a(class='button', href='baidu.com') 百度渲染后:
<a href="baidu.com">百度</a>
<a class="button" href="baidu.com">百度</a>
<a class="button" href="baidu.com">百度</a>所有 JavaScript 表達(dá)式都能用：
//- 已登錄
- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')渲染后:
<body class="authed"></body>
多行屬性
如果您有很多屬性，您可以把它們分幾行寫：
input(
type='checkbox'
name='agreement'
checked
)<input type="checkbox" name="agreement" checked="checked" />
如果您有一個(gè)很長(zhǎng)屬性，并且您的 JavaScript 運(yùn)行時(shí)引擎支持 ECMAScript 2015 模板字符串（包括 Node.js 和 io.js v1.0.0 和更新的版本），您可以使用它來寫屬性值：
input(data-json=`
{
"非常": "長(zhǎng)的",
"數(shù)據(jù)": true
}
`)渲染后:
<input data-json="
{
"非常": "長(zhǎng)的",
"數(shù)據(jù)": true
}
" />用引號(hào)括起來的屬性
如果您的屬性名稱中含有某些奇怪的字符，并且可能會(huì)與 JavaScript 語(yǔ)法產(chǎn)生沖突的話，請(qǐng)您將它們使用 "" 或者 '' 括起來。您還可以使用逗號(hào)來分割不同的屬性。這種屬性的例子有 Angular 2 中經(jīng)常用到的 [] 和 ()。
//- 在這種情況下，`(click)` 會(huì)被當(dāng)作函數(shù)調(diào)用而不是
//- 屬性名稱，這會(huì)導(dǎo)致一些稀奇古怪的錯(cuò)誤。
div(class='div-class' (click)='play()')渲染后:
index.pug:3:11
1| //- 在這種情況下，`(click)` 會(huì)被當(dāng)作函數(shù)調(diào)用而不是
2| //- 屬性名稱，這會(huì)導(dǎo)致一些稀奇古怪的錯(cuò)誤。
> 3| div(class='div-class' (click)='play()')
-----------------^
?
Syntax Error: Assigning to rvaluediv(class='div-class', (click)='play()')
div(class='div-class' '(click)'='play()')渲染后:
<div class="div-class" (click)="play()"></div>
<div class="div-class" (click)="play()"></div>屬性嵌入
注意
在 Pug / Jade 的舊版本中支持一種嵌入語(yǔ)法：
a(href="/#{url}") Link
這種語(yǔ)法 已經(jīng)不再被支持！ 它的相關(guān)替代可以在本文檔的下面部分找到。另外請(qǐng)您參考我們的遷移指南以獲取更多 Pug v2 與之前版本的不兼容情形。
如果您想要在您的屬性當(dāng)中使用變量的話，您可以這樣做：
- 直接使用 JavaScript 寫那個(gè)屬性：- var url = 'pug-test.html';a(href='/' + url) 鏈接||- url = 'https://example.com/'a(href=url) 另一個(gè)鏈接<a href="/pug-test.html">鏈接</a><a rel="external nofollow" target="_blank" >另一個(gè)鏈接</a>
- 如果您的 JavaScript 運(yùn)行時(shí)支持 ECMAScript 2015 模板字符串(包含在 Node.js/io.js 1.0.0 以及更新的版本當(dāng)中)，那么您還可以使用這種方式來簡(jiǎn)化您的屬性值：- 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>
不轉(zhuǎn)義的屬性
在默認(rèn)情況下，所有的屬性都經(jīng)過轉(zhuǎn)義（即把特殊字符轉(zhuǎn)換成轉(zhuǎn)義序列）來防止諸如跨站腳本攻擊之類的攻擊方式。如果您非要使用特殊符號(hào)，您需要使用 != 而不是 =。
div(escaped="<code>")
div(unescaped!="<code>")渲染后:
<div escaped="<code>"></div>
<div unescaped="<code>"></div>危險(xiǎn)
未經(jīng)轉(zhuǎn)義的緩存代碼十分危險(xiǎn)。您必須正確處理和過濾用戶的輸入來避免跨站腳本攻擊。
布爾值屬性
在 Pug 中，布爾值屬性是經(jīng)過映射的，這樣布爾值（true 和 false）就能接受了。當(dāng)沒有指定值的時(shí)候，默認(rèn)是 true。
input(type='checkbox' checked)
|
|
input(type='checkbox' checked=true)
|
|
input(type='checkbox' checked=false)
|
|
input(type='checkbox' checked=true.toString())渲染后:
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" checked="true" />如果 doctype 是 html 的話，Pug 就不會(huì)去映射屬性，而是使用縮寫樣式（terse style）（所有瀏覽器都應(yīng)該支持）。
doctype html
|
|
input(type='checkbox' checked)
|
|
input(type='checkbox' checked=true)
|
|
input(type='checkbox' checked=false)
|
|
input(type='checkbox' checked=true && 'checked')渲染后:
<!DOCTYPE html>
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox" checked="checked">樣式屬性
style（樣式）屬性可以是一個(gè)字符串（就像其他普通的屬性一樣）還可以是一個(gè)對(duì)象，這在部分樣式是由 JavaScript 生成的情況下非常方便。
a(style={color: 'red', background: 'green'})
渲染后:
<a style="color:red;background:green;"></a>
類屬性
class（類）屬性可以是一個(gè)字符串（就像其他普通的屬性一樣）還可以是一個(gè)包含多個(gè)類名的數(shù)組，這在類是由 JavaScript 生成的情況下非常方便。
- var classes = ['foo', 'bar', 'baz']
a(class=classes)
|
|
//- the class attribute may also be repeated to merge arrays
a.bang(class=classes class=['bing'])渲染后:
<a class="foo bar baz"></a>
<a class="bang foo bar baz bing"></a>它還可以是一個(gè)將類名映射為 true 或 false 的對(duì)象，這在使用條件性的類的時(shí)候非常有用。
- var currentUrl = '/about'
a(class={active: currentUrl === '/'} href='/') Home
|
|
a(class={active: currentUrl === '/about'} href='/about') About渲染后:
<a href="/">Home</a>
<a class="active" href="/about">About</a>類的字面值
類可以使用 .classname 語(yǔ)法來定義：
a.button
渲染后:
<a class="button"></a>
考慮到使用 div 作為標(biāo)簽名這種行為實(shí)在是太常見了，所以如果您省略掉標(biāo)簽名稱的話，它就是默認(rèn)值：
.content
渲染后:
<div class="content"></div>
ID 的字面值
ID 可以使用 #idname 語(yǔ)法來定義：
a#main-link
渲染后:
<a id="main-link"></a>
考慮到使用 div 作為標(biāo)簽名這種行為實(shí)在是太常見了，所以如果您省略掉標(biāo)簽名稱的話，它就是默認(rèn)值：
#content
渲染后:
<div id="content"></div>
&attributes
讀作 “and attributes”，&attributes 語(yǔ)法可以將一個(gè)對(duì)象轉(zhuǎn)化為一個(gè)元素的屬性列表。
div#foo(data-bar="foo")&attributes({'data-foo': 'bar'})
渲染后:
<div id="foo" data-bar="foo" data-foo="bar"></div>
這個(gè)對(duì)象不一定必須是一個(gè)字面值，它同樣也可以是一個(gè)包含值的對(duì)象（參見 Mixin 屬性）。
- var attributes = {};
- attributes.class = 'baz';
div#foo(data-bar="foo")&attributes(attributes)<div class="baz" id="foo" data-bar="foo"></div>
危險(xiǎn)
使用 &attributes 賦值的屬性并不會(huì)經(jīng)過自動(dòng)轉(zhuǎn)義過程。您必須正確處理和過濾用戶的輸入來避免跨站腳本攻擊(XSS)。 但是如果您是從一個(gè) mixin 調(diào)用中使用 attributes 的話，這個(gè)過程就是自動(dòng)的。
更多建議：