Javascript pug通过变量从NodeJS添加/删除类名

我有一个pug模板，当返回错误时应该显示红色文本，当操作成功时应该显示绿色文本

根据NodeJS后端返回的

状态

响应，我很难设置

类名

我的节点按如下方式呈现我的页面：

router.get('/forgot-password',
    session.ensureNotLoggedIn('/user/dashboard'),
    (req, res, next) => {
        res.render("forgot-password");
    });

router.post('/forgot-password',
    session.ensureNotLoggedIn('/user/logout'),
    (req, res, next) => {
        if (!req.body.edtEmail) {
            res.render("forgot-password");
        }
        emailer.sendVerifyEmail().then(value => {
            res.render("forgot-password", {message: "Email sent, check your inbox!", status: true});
        }).catch(reason => {
            res.render("forgot-password", {message: "Failed to send email [" + reason + "]", status: false});
        })
    });

关键点是

{message:[string]，status:[bool]}

。我需要呈现

消息

，并且根据

状态

，应该分别具有类

文本危险

或

文本成功

（如果失败或成功）

下面是我尝试过但没有成功的各种方法。为了澄清，

status

值为

false

，应添加

文本危险

类

---

在我的哈巴狗模板中：

• 我试过了（）：

  p#lblMessage（class=status？文本成功：文本警告）#{message}

渲染

<p id="lblMessage">Failed to send email [true]</p>

• 尝试过了（）：

  p#lblMessage（class=“#{status？text success:text warning}”）#{message}

渲染：

<p class="#{status ? text-success : text-warning}" id="lblMessage">Failed to send email [true]</p>

<p class="#{status ? text-success : text-warning}" id="lblMessage">Failed to send email [true]</p>

---

如何使用从NodeJS后端传递的变量来添加/更改/删除pug模板中html元素的类？

添加条件类名可以通过以下方法实现：

p#lblMessage(class=(status  ? 'text-success' : 'text-warning')) #{message}

要解释上述代码与您提到的代码之间的差异，请执行以下操作：

class

属性得到一个字符串，帕格将其用作值。如果返回布尔值（或null），则属性self是否会被呈现。例如，复选框：

input(type='checkbox', checked=(1===1 ? true : false))
input(type='checkbox', checked=(1===2 ? true : false))

rendered to:

<input type="checkbox" checked="checked">
<input type="checkbox">

input（type='checkbox'，checked=（1==1？true:false））
输入（type='checkbox'，checked=（1==2？true:false））
提交给：

添加条件类名可以通过以下方式实现：

p#lblMessage(class=(status  ? 'text-success' : 'text-warning')) #{message}

要解释上述代码与您提到的代码之间的差异，请执行以下操作：

class

属性得到一个字符串，帕格将其用作值。如果返回布尔值（或null），则属性self是否会被呈现。例如，复选框：

input(type='checkbox', checked=(1===1 ? true : false))
input(type='checkbox', checked=(1===2 ? true : false))

rendered to:

<input type="checkbox" checked="checked">
<input type="checkbox">

input（type='checkbox'，checked=（1==1？true:false））
输入（type='checkbox'，checked=（1==2？true:false））
提交给：

经过一些测试、更多的阅读/搜索等，我找到了一个有效的解决方案。我不建议使用我的解决方案，我把它作为一个“垫脚石”，告诉我如何根据我对建议、论坛等的阅读，找到一个解决方案

注意，在寻找解决方案时，我不知道括号

（）

语法

//第一行是GET，因此不会呈现

如果状态！==未定义
p#lblMessage（class=status？“文本成功”：“文本危险”）#{message}

使用WebStorm时，我注意到一个可能的语法错误（但是页面编译正确）：

---

我建议改为使用@kmgt。经过一些测试、更多的阅读/搜索等，我找到了一个有效的解决方案。我不建议使用我的解决方案，我把它作为一个“垫脚石”，告诉我如何根据我对建议、论坛等的阅读，找到一个解决方案

注意，在寻找解决方案时，我不知道括号

（）

语法

//第一行是GET，因此不会呈现

如果状态！==未定义
p#lblMessage（class=status？“文本成功”：“文本危险”）#{message}

使用WebStorm时，我注意到一个可能的语法错误（但是页面编译正确）：

---

我建议改为使用@kmgt，

将我的解决方案发布到下面的记录中，但接受您将我的解决方案发布到下面的记录中，但当表达式未设置在括号中时，接受您的命名为vscode中的扭曲红线。当表达式未设置在括号中时，vscode中的扭曲红线相同。