能否使用Jade的if条件语句结合Flash变量修改样式类值并控制div显示？

没问题，这两个需求在Jade（现在一般叫Pug了）里都能轻松实现，我来给你具体拆解和修改代码：

1. 有错误消息时显示提示div #

首先，假设你已经通过Express的connect-flash中间件把登录失败的错误消息存在了flash.error里，那在模板里只需要用if条件判断这个变量是否存在，存在就渲染对应的提示容器就行。

2. 结合Flash变量动态修改样式类 #

Jade支持在类属性里直接写条件逻辑，不管是用三元表达式还是条件块都可以，这样就能根据是否有错误消息来给元素添加不同的样式类。

下面是整合后的完整代码示例：

div(class='formPosSize')
  //- 错误提示：有消息才显示
  if flash.error
    div(class='login-error') #{flash.error}

  //- 动态修改form的样式类：有错误时添加has-error类
  form(action='/auth/login' method='post' autocomplete='off' class=flash.error ? 'login-form has-error' : 'login-form')
    fieldset
      legend.legend Login
      .input
        input(name='username', placeholder='Email', required='')
        span
          i.fa.fa-envelope-o
      .input
        input(type='password',name='password', placeholder='Password', required='')
        span
          i.fa.fa-lock
      button.su(type='submit') Login

代码说明：

• 错误消息显示：if flash.error会检查是否存在登录错误消息，只要有值就会渲染那个login-errordiv，你可以给这个类写对应的样式（比如红色文字、背景提示）。
• 动态样式类：这里用了三元表达式class=flash.error ? 'login-form has-error' : 'login-form'，当有错误时，form会多一个has-error类，你可以用这个类来修改表单的样式（比如边框变红、增加阴影效果）。

如果觉得三元表达式不够灵活，也可以用Jade的条件块写法：

div(class='formPosSize')
  if flash.error
    div(class='login-error') #{flash.error}

  if flash.error
    form(action='/auth/login' method='post' autocomplete='off' class='login-form has-error')
      //- 表单内容...
  else
    form(action='/auth/login' method='post' autocomplete='off' class='login-form')
      //- 表单内容...

不过三元表达式更简洁，适合这种简单的二选一场景。另外要确保你的Express项目已经正确配置了connect-flash中间件，不然模板里访问不到flash变量哦。

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