jade操作HTML中的js

如何在jade中解析变量

js部分

// jade  pug
// cnpm install jade 
//1.解析字符串
// 2.解析文件
const jade=require('jade');
// var str=jade.render('html');
var str=jade.renderFile('./view/1.jade',{pretty:true});
console.log(str);

jade部分

html
    head
    body
        div
            a(href='http://www.baidu.com') 百度
            input(type='text',name='uname',value='用户名')
            div(style="width:100px;height:100px")
            div(style={width:'100px',height:'100px'})
            div(class='box left active')
            div(class=['box','left','active']) aaa
                span bbb
            div
                |aaaa
        script
            include 1.js

在jade中做运算

js部分

const jade=require('jade');
var str=jade.renderFile('./view/3.jade',{pretty:true,a:3,b:5});
console.log(str);

jade部分

html
    head
    body
        div a+b=#{a+b}
        div #{a}
        div #{b}
        h1=a
        h1=b

jade解析style class

js部分

const jade=require('jade');
var str=jade.renderFile('./view/4.jade',{pretty:true,
json:{width:'200px',height:'200px',background:'red'},
arr:['box','left','active']});
console.log(str);

jade部分

html
    head
    body
        div(style=json)
        p(class=arr)

在jade中解析js

js部分

const jade=require('jade');
var str=jade.renderFile('./view/6.jade',{pretty:true,arr:['aaa','bbb','ccc']});
console.log(str);

jade部分

html
    head
    body
        -for(var i=0;i<arr.length;i++)
            div=arr[i] 

在jade中如何循环(同上：在jade中解析js)

js部分

const jade=require('jade');
var str=jade.renderFile('./view/6.jade',{pretty:true,arr:['aaa','bbb','ccc']});
console.log(str);

jade部分

html
    head
    body
        -for(var i=0;i<arr.length;i++)
            div=arr[i] 

在Jade中解析标签

js部分

const jade=require('jade');
var str=jade.renderFile('./view/7.jade',{pretty:true,content:"<h1>dfglkfdkbl;gfblgf;lbhgf;lhbk</h1>"});
console.log(str);

jade部分

html
    head
    body
        div!=content

在jade中做条件判断

js部分

const jade=require('jade');
var str=jade.renderFile('./view/8.jade',{pretty:true});
console.log(str);

//  + - * / %(膜)：两个数相除的余数   5%2=1 10%2=0 19%2=1 作用：判断奇偶性

jade部分

html
    head
    body
        -var a=19;
        -if(a%2==0)
            div 偶数
        -else
            div 奇数