如何简化if / else语句以在pug / jade中添加类？

Question

所以我有一系列的帖子，我想用它们创建一个轮播。 我想知道我是否可以简化这段代码，因此它看起来不那么糟糕，而不是重复相同的代码只是因为我需要在div元素中添加一个类。

for v, i in arr
    if i === 0
        .carousel-item.active
            img(src=v.banner.toString())
                .container
                    .carousel-caption.text-left
                        h1= v.name
                        p= v.description
                        p
                            a.btn.btn-lg.btn-primary(href=v.id, role='button') More!
    else
        .carousel-item
            img(src=v.banner.toString())
                .container
                    .carousel-caption.text-left
                        h1= v.name
                            p= v.description
                            p
                                a.btn.btn-lg.btn-primary(href=v.id, role='button') More!

Answer 1

要解决这个（非常常见的）问题，Pug允许您将数组或对象传递给class属性。在您的情况下，对象更有意义，因为您可以轻松地将类名（active）映射到布尔值，指示是否应该添加类（i === 0）。

.carousel-item(class={ active: i === 0 })

您可以在Attributes page of Pug's documentation上了解更多有用的技巧。