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