杰德（Jade）是一种流行的模板引擎，它允许您使用简单而优雅的语法来生成 HTML。但是，当您需要在模板中添加重复的内容时，循环变得至关重要。在这篇文章中，我们将深入探讨如何在杰德（帕格）模板引擎中使用循环。
基本循环
首先，让我们看一个基本的循环示例。假设我们有一个包含产品信息的数组，我们想在网页上列出它们的名称和价格。可以使用以下代码：
---- ------- -- -------- -- ------------ -- -------------
这个循环迭代了 products 数组，并对每个元素执行两个操作：创建一个段落标记，并显示产品的名称和价格。
值得注意的是，我们使用缩进来表示循环体。这是因为杰德使用缩进来表示块级元素。如果我们想在循环内嵌套更多的 HTML，可以简单地缩进更多。例如，以下代码将在每个产品下方添加一个链接：
---- ------- -- -------- -- ------------ -- ------------- -------------------------------- ---- -----------
循环索引
有时候，在循环中访问当前元素的位置是很有用的。可以使用以下语法来获取当前迭代的索引：
---- -------- - -- -------- -- - - -- - - ------------ -- --- - ------------------------
在这个例子中，我们迭代 products 数组，并将每个产品的名称和价格显示为段落标记。我们还使用 i 变量来显示产品的索引。
循环嵌套
有时候，您需要在循环内部再次使用循环。可以使用相同的 each 语法来嵌套循环。例如，以下代码将在每个类别下方列出该类别的产品：
---- -------- -- ----------
--- -------------
---- ------- -- -----------------
-- ------------
-- --- - ------------------------在这个例子中，我们首先迭代 categories 数组，并为每个类别创建一个标题。然后，在每个类别下面，我们迭代该类别的产品，并为每个产品创建一个段落标记。
小结
杰德（帕格）模板引擎使得在 HTML 中使用循环变得非常容易。通过简单的缩进，您可以指定要在循环体内重复的内容，而无需使用任何繁琐的语法或控制结构。本文介绍了如何编写基本循环、访问循环索引以及嵌套循环。希望这些技巧对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/14879