在 Pug 中循环多个变量

Question

我正在努力寻找在循环中声明这些变量的正确方法。我需要变量在块中的两个不同位置循环。

第一个 const breadcrumbsItems：必须在 span 标记中循环。

第二个常量breadcrumbsAttributes：必须在(data-trigger="")

中循环

谁能帮我解决一下？提前致谢

   
- const breadcrumbsItems = [ `John`, `Jane`, `Jefferson`,  `Ramirez` ]
- const breadcrumbsAttributes = ['tabOne','tabTwo', 'tabThree', 'tabFour']
     
  .breadcrumbs
    ul.breadcrumbs__list
      li.breadcrumbs__elements
        a.breadcrumbs__tabs.is-selected(data-trigger="#{const breadcrumbsAttributes}")
          span.breadcrumbs__item #{const breadcrumbsItems}
          svg.breadcrumbs__icon
            use(xlink:href="assets/defs.svg#icon-close")

Answer 1

您将需要嵌套迭代。你可以使用每一个。这是一个您可以匹配以适合您的标记的示例。

例子也可以在code section of the docs下找到。

如果您想快速使用一些 pug 标记，可以将此代码放入 codepen.io 并将 pug 添加为 html 预处理器。

- const breadcrumbsItems = [ `John`, `Jane`, `Jefferson`,  `Ramirez` ]
- const breadcrumbsAttributes = ['tabOne','tabTwo', 'tabThree', 'tabFour']

each item in breadcrumbsItems
  a.example(data-trigger=item) #{item}
    each attr in breadcrumbsAttributes
      div #{attr}

另一个常见的混淆是什么时候使用#{}，什么时候不使用。如果您像这样声明属性 a(data-trigger=var)，括号内的内容将被视为 javascript。所以没有#{}.

如果您在文本或标记区域内，请使用#{}。

Answer 2

您可以遍历其中一个数组，然后使用循环的索引访问另一个数组中的相应值：

ul
  each item, i in breadcrumbItems
    li
      button(data-trigger= breadcrumbsAttributes[i])
        span #{item}

此外，尝试始终使用按钮而不是链接来执行不会将用户导航到新内容的操作。

在 Pug 中循环多个变量

Looping over multiple variables in Pug

javascript

html

pug