时间戳

首页 > 解决方案 > Jade/Pug w/ HTML 数据元素

pug - Jade/Pug w/ HTML 数据元素

问题描述

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

.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

解决方案

Pug 有一些循环结构，文档在这里。

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

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

eachis的别名，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>

推荐阅读