你不应该有具有多个属性的哈巴狗标签

Question

Pug mixin 与计算出的 CSS 类名

我的哈巴狗 mixintweet通常只生成这个 HTML：

<div class='col-md-3'></div>

我传递tweet了参数index，它是一个从零开始的正数。当index等于tweetData.index（在别处定义）时，我希望生成div的发光，如下所示：

<div class='blueGlow col-md-3'></div>

这是我的尝试：

mixin tweet(index)
    div.collapse(class= tweetData.index === index ? "blueGlow" : undefined).col-md-3(data-index=index)

错误信息是： You should not have pug tags with multiple attributes.

Answer 1

问题是你试图定义属性两次，像这样尝试它应该可以工作：

div.collapse.col-md-3(class=(tweetData.index === index ? "blueGlow" : undefined), data-index=index)

虽然这只是一种偏好，但您不需要使用 div，因为默认情况下，pug 在您省略它时使用 div 作为元素。此外，您可以通过使用&&逻辑运算符来最小化条件行：

.collapse.col-md-3(class=(tweetData.index === index && "blueGlow"), data-index=index)