Question

我尝试使用 PUG模板引擎打印<a>代码5次。

我希望我的代码如下所示。我只想要两个项目和项目-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，但为什么在课堂上 item- 之后不打印 x 的值？

Answer 1

通过更改Pug's documentation中指定的代码，我设法获得了您想要的结果：

- 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

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

2 个答案: