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

Posted 2023-02-22

【中文标题】Jade 条件（if/else）将类添加到 div 内联

【英文标题】：Jade conditional (if/else) to add class to div inline

【发布时间】：2012-12-18 03:10:05

【问题描述】：

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

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

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

【问题讨论】：

我用这个a(class=(selectNav=='myprofile' && 'selected'), href='...')

【参考方案1】：

这行得通：

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

试试here。

【讨论】：

但如果条件为假，您甚至不希望元素具有class 属性..

对于像 a(class=tasks[i].status ? 'btn btn-success' : 'btn btn-dark', href=/turn/ $tasks[i]._id) 这样的对象值怎么做无法读取未定义的属性“状态”

【参考方案2】：

如果你不希望class属性在没有值的时候被添加，你可以将它赋值为undefined而不是一个空字符串。这是前面的例子，稍作修改：

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

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

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

【讨论】：

谢谢！正是我想要的。

如果需要检查多个条件怎么办？例如两个类，每个类都有自己的检查？

【参考方案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。

【讨论】：

这是现在使用玉/哈巴狗的方式。它允许多个条件类，并为对象添加另一个键。

【参考方案4】：

对于哈巴狗 2，您可以使用以下语法：

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

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

【参考方案5】：

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

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

如果不是很明显，这会检查 fromEdit 是否存在，如果存在则将 in 作为类输入，否则将类留空。