如何在 PUG 模板引擎中的锚标记的 class 中传递 for 循环变量值？

Question

我正在尝试使用 PUG 模板引擎.

打印 <a> 标签 5 次

我想要如下所示的代码。我只想要两个 classe item 和 item-1,2,3 等

HTML code: desired result

<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 code

- 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

Error

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- 在 class?

Answer 1

我已经按照 Pug's documentation 中指定的代码更改了您想要的结果：

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

代码笔：https://codepen.io/anon/pen/YrqBdY

Answer 2

你可以这样写：

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

如何在 PUG 模板引擎中的锚标记的 class 中传递 for 循环变量值？

How to pass for loop variable value in a class of a anchor tag in PUG template engine?

html

javascript

pugjs

pug