如何在PUG模板引擎的錨標記類中傳遞循環變量值？

Question

我正在嘗試使用PUG模板引擎將<a>標簽打印5次。

我想要下面的代碼。 我只想要兩個classe item和item-1,2,3等。

HTML代碼：預期結果

<a class="item item-1" href="#">1  Item</a><br/>
<a class="item item-2" href="#">2  Item</a><br/>
<a class="item item-3" href="#">3  Item</a><br/>
<a class="item item-4" href="#">4  Item</a><br/>

我現在正在使用下面的這段代碼，並且工作正常

PUG代碼

- for (var x=1; x < 6; x++)
    a.item.item-(href='#') #{x}  Item
    br

HTML的下面哪個輸出和#{x}變量可以正常打印

<a class="item item-" href="#">1  Item</a><br/>
<a class="item item-" href="#">2  Item</a><br/>
<a class="item item-" href="#">3  Item</a><br/>
<a class="item item-" href="#">4  Item</a><br/>
<a class="item item-" href="#">5  Item</a><br/>

但是當我像下面那樣使用#{x}變量時，它顯示錯誤

- for (var x=1; x < 6; x++)
    a.item.item-#{x}(href='#') #{x}  Item
    br

錯誤

Pug:2:17
    1| - for (var x=1; x < 6; x++)
  > 2|     a.item.item-#{x}(href='#') #{x}  Item
-----------------------^
    3|     br

Unexpected token `interpolation` expected `text`, `interpolated-code`, `code`, `:`, `slash`, `newline` or `eos`

據我所知，我們使用＃為ID，但它為什么不打印后x的值item-類？

Answer 1

通過更改Pug文檔中指定的代碼，我設法獲得了所需的結果：

- for (var x=1; x < 6; x++)
    a(class='item item-'+x)(href='#') #{x}  Item
    br

Codepen： https ：//codepen.io/anon/pen/YrqBdY

Answer 2

您可以這樣寫：

- for (var x=1; x < 6; x++)
    a.item(href='#', class="item-#{x}") #{x}  Item
    br