Question

我是pug的新手，现在我试图呈现一个html视图，其中包含一个表，该表的条目是从app.js解析的

这是我的index.pug

doctype html
html(lang='en')
    head
        title Pug
    body
        table
            - var columns = ['apple', 'pine', 'peach'];
            tr
                each column in columns
                    th #{column}
            - for (var i = 0; i < 3; i++)
                tr 
                    each column in columns 
                        td #{data[i].column}

这是我的app.js

const express = require('express');
const pug = require('pug')
var app = module.exports = express();

app.set('view engine', 'pug');

var foo = [{
        apple: 1,
        pine: 2,
        peach: 3
    }, {
        apple: 4,
        pine: 5,
        peach: 6
    },
    {
        apple: 7,
        pine: 8,
        peach: 9
    }
];
app.get('/', (req, res) => {
    res.render('index', {
        data: foo
    });
});

app.listen(3000, () => console.log('Listen to port 3000 now'));

我不确定如何执行以下技巧：在index.pug中，我确实声明了一个包含三个可能值apple，pine和peach的本地js数组，我使用一个for-each循环来遍历此数组。但是，在哈巴狗的最后一行中，哈巴狗似乎并没有将#{data[i].column}中的“列”替换为apple，pine和peach，因为循环是遍历。

那么有没有办法告诉pug用我声明的相同本地js变量的值替换column中的#{data[i].column}？

谢谢

Answer 1

使用if语句检查您的本地变量值和服务器端变量值是否相同，并根据该值可以将值赋予本地变量td的{{1}}

column

Answer 2

使用

html(lang='en')
    head
        title Pug
    body
        table
            - var columns = ['apple', 'pine', 'peach'];
            //- - var columns = Object.keys(data[0]); // Could also use this
            tr
                each column in columns
                    th=column
            - for (var i = 0; i < 3; i++)
                tr 
                    each column in columns
                        td=data[i][column]

将本地javascript变量的值替换为Pug的插值

2 个答案: