屬性

標籤屬性看起來類似於 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()')
-----------------^

Syntax Error: Assigning to rvalue

<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) 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 及更新版本)，也可以使用其語法來簡化屬性

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

ID 可以使用 #idname 語法定義

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

由於 div 是標籤的常見選項，因此如果您省略標籤名稱，它就是預設值

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

&attributes

發音為「and attributes」，&attributes 語法可以用於將物件展開成元素的屬性。

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

上述範例使用物件文字。但您也可以使用值為物件的變數。（另請參閱：混合屬性）。

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

注意

使用 &attributes 套用的屬性不會自動跳脫。您必須確保清除所有使用者輸入，以避免跨網站指令碼（XSS）。如果從混合呼叫傳入 attributes，則會自動執行此動作。

屬性

多行屬性 ¶

帶引號的屬性 ¶

屬性插補 ¶

注意

未轉譯的屬性 ¶

注意

布林屬性 ¶

樣式屬性 ¶

類別屬性 ¶

類別文字 ¶

ID 文字 ¶

&attributes ¶

注意