【问题标题】：You should not have pug tags with multiple attributes你不应该有具有多个属性的哈巴狗标签
【发布时间】：2018-01-04 02:43:03
【问题描述】：

带有计算出的 CSS 类名的 Pug mixin

我的 pug 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.

【问题讨论】：

你可以这样尝试：div.collapse.col-md-3(class=(tweetData.index === index ? "blueGlow" : undefined), data-index=index)
那行得通。如果你把它放在一个答案中，我会接受它。

标签： pug

【解决方案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)

【讨论】：