如何在PugJS中使用可选逻辑为元素添加data-active属性

你可以直接在元素的属性定义里嵌入条件表达式，利用Pug自带的属性渲染规则实现需求，不需要拆分if/else分支。

方案1：直接内联条件（最简便，适合单属性判断） #

当属性值为null/undefined/false时，Pug会自动省略该属性，你可以按照如下语法写：

.my__element(data-month=months[month] data-active=i === 0 ? 'true' : null)

注意不要返回空字符串，否则会生成data-active=""的空值属性，不符合需求

方案2：通过属性对象批量处理（适合多属性判断场景） #

如果需要判断的动态属性较多，可以先拼装属性对象再通过&attributes语法批量注入：

// 先定义基础属性
- const elementAttrs = {
  'data-month': months[month]
}
// 满足条件时追加属性
- if (i === 0) elementAttrs['data-active'] = 'true'

// 注入属性到元素
.my__element&attributes(elementAttrs)

两种方案最终生成的HTML效果和你原来的if/else写法完全一致，同时消除了重复代码。

内容的提问来源于stack exchange，提问作者Nuno Marques