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

Question

Pug mixin 与计算出的 CSS 类名

我的哈巴狗 mixin tweet 通常只生成这个 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)