jade 支持html,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

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

div=arr[i]

在Jade中解析标签

js部分

const jade=require('jade');

var str=jade.renderFile('./view/7.jade',{pretty:true,content:"

dfglkfdkbl;gfblgf;lbhgf;lhbk

"});

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 奇数