Question

我试图传递变量＆＃39;天气＆＃39;我的Jade模板，如果它是下雨，清除等，背景将会改变。

这是我的路线index.js文件

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' , ip: req.ip, weather: 'rain'});
});

module.exports = router;

这是我的index.jade文件中的部分，其中包含我试图传递的条件

//styles
    style.
      .intro {
      if weather == 'rain'
        background: url(../images/rain.jpg) no-repeat bottom center scroll;
      }

这是我刚刚改变背景而没有条件的地方，它起作用了

//styles
    style.
      .intro {
      background: url(../images/rain.jpg) no-repeat bottom center scroll;
      }

我有最新版本的jade，我确保缩进，所以我不太确定我的语法错误

Answer 1

不幸的是，使用您描述的方法无法做到这一点。正如this SO answer中所解释的那样，style内容不会被Pug解释，只是以纯文本格式保存。这意味着任何条件逻辑都需要在页面的实际主体中发生。

您可以通过创建名为.rainy和.clear的两个（或更多）类来轻松解决此问题，并在style部分中静态定义这些类。然后，在正文中，您可以根据.intro的值动态地向weather元素添加类。

Jade如何使用从路由传递的变量来执行条件css

1 个答案: