模板引擎jade（pug）全

摘要： 承接上文（ https://www.jianshu.com/p/2e69f2d67520 ） 七、在jade中解析變數 const jade=require('jade'); var str=jade.renderFile('./view/1.jade...

承接上文（ ofollow,noindex">https://www.jianshu.com/p/2e69f2d67520 ）

七、在jade中解析變數

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

html
head
body
div
p 我的名字叫#{uname}

八、在jade中解析運算

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

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

九、在jade中解析style、css

const jade=require('jade');
var str=jade.renderFile('./view/2.jade',{pretty:true,
jason:{width:'250px',height:'150px',background:'red'},
arr:['left','box','hearder']
})
console.log(str);

html
head
body
div(style=jason)
div(class=arr)

十、在jade中解析js程式碼

在js程式碼前加橫槓-
但是js在html行中不顯示

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

html
head
body
-var a=5;
-var b=3;
div a+b=#{a+b}

十一、在jade中如何迴圈

const jade=require('jade');
var str=jade.renderFile('./view/4.jade',{pretty:true,arr:['abc','def','ghi']});
console.log(str);

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

十二、在jade中做條件判斷

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

html
head
body
-var a=9
-if(a%2==0)
div 偶數
-else
div 奇數

%取餘