javascript - Jade 条件（if/else）将类添加到 div 内联

Question

有没有办法在玉模板中内联？

if(typeof fromEdit != 'undefined')
   div#demo.collapse.in
else
   div#demo.collapse

想要执行此条件检查“内联”，如果 fromEdit 存在，结果会将 .in 添加到 div 的末尾。

Answer 1

这有效：

div#demo.collapse(class=typeof fromEdit === "undefined" ? "" : "in")

在这里试试。

Answer 2

如果您不希望在没有值的情况下添加类属性，则可以将其分配为 undefined 而不是空字符串。这是前面的示例，稍作修改：

div#demo.collapse(class=typeof fromEdit === "undefined" ? undefined : "in")

更新：此外，如果您使用的是pug，您现在可以添加任意数量的class=声明，使用不同的条件，它们将在生成的类属性中连接起来。例如：

#demo.collapse(class=cond1 && 'class1' class=cond2 && 'class2')

Answer 3

如http://jade-lang.com/reference/attributes/中所述：

类属性 [...] 它也可以是将类名映射到真或假值的对象，这对于应用条件类很有用

该任务也可以通过以下方式完成：

div#demo.collapse(class={ in: typeof fromEdit != 'undefined' })

虽然它在这里不起作用http://naltatis.github.com/jade-syntax-docs/（我认为他们需要更新一些东西），但它适用于jade@1.11.0。

Answer 4

使用 pug 2 您可以使用以下语法：

div#demo(class="collapse", class={"in": typeof fromEdit !== 'undefined'}) Home page

更多信息：https ://pugjs.org/language/attributes.html

Answer 5

虽然是一个老问题，但我发现以下工作，因为 Pug 包含内置的对象存在检测：

div#demo.collapse(class=fromEdit? 'in':undefined)

如果不明显，则检查是否fromEdit存在以及是否确实in作为类输入，否则将类留空。