Nodejs中jade里怎么判断是否输出一个外围标签

Nodejs中jade里怎么判断是否输出一个外围标签

   #container
.content

渲染后的结果过为

      <div id="container">
            <div class="content"></div>
      </div>

比如上面一个结构，判断是否渲染#container这个标签，jade里应该怎么判断？

就是渲染后如果是false的时候渲染成

       <div class="content"></div>

6 回复

在Node.js的Jade（现称为Pug）模板引擎中，你可以通过条件语句来判断是否输出某个外围标签。具体来说，可以使用if语句或&&操作符来实现这一功能。

假设我们有一个变量showContainer，其值决定是否渲染#container这个标签。以下是具体的实现方法：

使用 if 语句

- let showContainer = true // 可以根据需要修改这个变量的值
if showContainer
    #container
        .content

如果showContainer为true，则渲染出以下HTML：

<div id="container">
    <div class="content"></div>
</div>

如果showContainer为false，则不会渲染#container标签，只渲染.content标签：

<div class="content"></div>

使用 && 操作符

你也可以使用逻辑与(&&)操作符来简化条件判断：

- let showContainer = true // 可以根据需要修改这个变量的值
#container && 
    .content

这种方式的工作原理是，如果showContainer为true，那么#container标签会被渲染；否则，它将被忽略。

示例代码

假设我们有一个简单的Express应用，并且希望根据请求参数来决定是否渲染#container标签：

const express = require('express');
const app = express();
app.set('view engine', 'pug');

app.get('/', (req, res) => {
    let showContainer = req.query.container === 'true';
    res.render('index', { showContainer });
});

app.listen(3000, () => console.log('Server is running on port 3000'));

对应的Pug模板文件views/index.pug:

- let showContainer = showContainer // 确保传递过来的变量可用
if showContainer
    #container
        .content
else
    .content

这样，当你访问http://localhost:3000/?container=true时，会渲染包含#container的结构；而访问http://localhost:3000/?container=false时，则只渲染.content标签。


还是看不懂… 在什么时候判断, 有没有具体点的说法?

if ...
  | <div id="content">
.content
if ...
  | </div>

dirty, 但是能work。

我现在就是这么做的 这样做跟JADE简洁那样的写法背离～唉，看了遍jade文档貌似没有相关方法。。

我只是举个例子，比如AJAX模板，有些内容的外围容器就不需要返回

在Node.js中的Jade模板引擎（现在称为Pug）中，你可以通过条件语句来判断是否输出某个外围标签。具体来说，你可以使用Jade的逻辑控制语句来实现这一功能。

假设我们有一个变量showContainer，如果它的值为true，则渲染带有id="container"的div标签；否则，只渲染内部的div.content标签。以下是一个示例代码：

- let showContainer = true // 可以根据需要修改这个值

if showContainer
    #container
        .content
else
    .content

当showContainer为true时，渲染的结果如下：

<div id="container">
    <div class="content"></div>
</div>

当showContainer为false时，渲染的结果如下：

<div class="content"></div>

在这个例子中，我们使用了Jade的if语句来根据条件决定是否渲染外围的div#container标签。这样可以根据实际需求灵活地控制HTML结构。

回到顶部