如何在哈巴狗循环中回显一些 HTML？答案

【问题标题】：How do I echo some HTML within a pug loop?如何在哈巴狗循环中回显一些 HTML？
【发布时间】：2019-02-11 05:08:38
【问题描述】：

我正在尝试用哈巴狗 2.0.3 做到这一点：

- var myCode = "<i class='icon fa fa-heart' aria-hidden='true' data-aos='zoom-in'></i>";
- var i = 0;

while i < 10
  !{myCode}
  i++

我希望 myCode 的内容被编译成 HTML 十次，但我收到了这个错误： unexpected text "!{myC"

如何让 pug 在循环中回显一些未转义的 html？

【问题讨论】：

你试过div !{myCode}吗？ Pug 需要一个标签名称来输出 (ref)
是的，这行得通，谢谢！我会添加一个答案

标签： html pug preprocessor

【解决方案1】：

这只哈巴狗应该能做到这一点，并且here's a codepen 可以实时使用（您必须使用开发工具检查它的作用，因为没有可见元素）。

这只哈巴狗：

- var i = 0
while i < 10
  div(class='hidden-' + i)
  div
    i.icon.fa.fa-heart(aria-hidden='true' data-aos='zoom-in')
  - i++

生成这个 html：

<div class="hidden-0"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-1"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-2"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-3"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-4"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-5"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-6"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-7"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-8"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-9"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>

如果您希望带有 i/icon 的 div 位于 hidden-X div 中，那么只需像这样缩进它：

- var i = 0
while i < 10
  div(class='hidden-' + i)
    div
      i.icon.fa.fa-heart(aria-hidden='true' data-aos='zoom-in')
  - i++

产生这个：

<div class="hidden-0">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-1">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-2">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-3">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-4">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-5">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-6">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-7">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-8">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-9">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>

【讨论】：

【解决方案2】：

工作循环：

while i < 10
    div(class="hidden-" + i++)
    div !{myCode}

我找不到“静默”迭代 i 的方法，所以我不得不为此创建一个虚拟类。

编译后的 HTML 如下所示：

<div class="hidden-0"></div>
<div><i class='icon fa fa-heart' aria-hidden='true' data-aos='zoom-in'></i></div>
<div class="hidden-1"></div>
<div><i class='icon fa fa-heart' aria-hidden='true' data-aos='zoom-in'></i></div>
...

【讨论】：

如果有人知道如何 i++ 而不必将其编译为 HTML，请告诉我:)