0

我正在尝试<a>使用PUG 模板引擎打印标签 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，但为什么它在课堂后没有打印xitem-的值？

4

2 回答 2

1

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

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

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

于 2017-09-20T10:08:39.507 回答
0

你可以这样写：

- for (var x=1; x < 6; x++)
    a.item(href='#', class="item-#{x}") #{x}  Item
    br
于 2017-09-20T13:23:35.960 回答