Jade/Pug w/ HTML 数据元素答案

【问题标题】：Jade/Pug w/ HTML data elementJade/Pug w/ HTML 数据元素
【发布时间】：2018-09-24 11:27:01
【问题描述】：

我在代码中成功使用了以下行：

.div(data-text='text')

但我正在开发一个多语言网站，从 JSON 中读取带有 JQuery 的语言。在这种情况下，将文本放入简单的 HTML p 标签的常用方法是：

p(tkey='text')

我想在数据文本 div 中使用相同的方法：

.div(data-text=(tkey='text'))

这个问题可能是因为我想在一个循环中使用它，例如：

- for(var i = 1; i < 5; i++) {
    .div(data-text='data' + i)
- }

有可能吗？语法是什么？

谢谢大家！

【问题讨论】：

标签： pug

【解决方案1】：

Pug 有几个结构要循环，docs are here。

为了做你想做的事，我建议使用每个：

each val in [1, 2, 3, 4, 5]
  div(data-text= 'data' + val)

each 的别名是 for，所以它做同样的事情：

for val in [1, 2, 3, 4, 5]
  div(data-text= 'data' + val)

如果您有大量的值要迭代，则改用while 语法：

- var index = 0;
- var limit = 25;
while index < limit
    div(data-text= 'data' + index++)

但是，您通常会循环访问现有的对象数组，例如数据库中的结果集。如果您想在每个循环中使用索引，请将其添加为第二个参数：

- var results = ["Adam", "Bonnie", "Clara"];
each person, index in results
  p(data-text= 'data' + index)= person

将生成此 HTML：

<p data-text='data1'>Adam</p>
<p data-text='data2'>Bonnie</p>
<p data-text='data3'>Clara</p>

另请注意 .div 创建此 HTML：

<div class="div"></div>

如果你只想要一个 div 然后省略前导句点，div 会产生这个：

<div></div>

【讨论】：