Pug语法中的三元运算符

2024-05-20 • 问答

是否可以在Pug代码中使用三元运算符？

我试图使其工作：

哈巴狗文件

- var disabled = true
input(type="checkbox" disabled ? disabled : null)

HTML结果

<input disabled ? disabled : null></input>

HTML期望的结果

<input disabled></input>

我了解描述here的标准条件Pug语法，但是很难相信现代Pug语法中没有使用三元运算符的机会。

感谢您的帮助！

您非常接近-Pug只需要一个属性即可开始处理。您的代码只是在进行评估而不属于任何属性。

因此，只需添加要评估的属性，然后将三元运算符放在其后即可。在这种情况下，您只希望出现disabled，仅此而已，所以我们将空字符串用于true，将null用作false，以使pug知道该怎么做。

它在codepen中工作。

div
  - var disabled = true;
  input(disabled = disabled ? '' : null)

使用true，哈巴狗会生成<input disabled>。

使用false，哈巴狗会生成<input>。

在这种情况下，如果变量是布尔值，则实际上不需要使用三元运算符。您可以将值分配给属性。 Pug具有用于处理boolean attributes的内置系统，如果文档类型为html，Pug甚至呈现简洁的（非镜像）属性。

哈巴狗：

- var foo = true
input(type='checkbox',disabled= foo)
- var bar = false
input(type='checkbox',disabled= bar)

渲染的HTML（如果文档类型为html）

<input type="checkbox" disabled />
<input type="checkbox" />