php配合jade使用,详解基于模板引擎Jade的应用

本文小编就为大家分享一篇基于模板引擎Jade的应用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。

有用的符号:

| 竖杠后的字符会被原样输出 · 点表示下一级的所有字符都会被原样输出,不再被识别。(就是|的升级版,实现批量) include 表示引用外部文件

短杠说明后面跟着的字符只是一段代码(与|的区别就是,|后面的内容会被显示,而短杠后面的内容直接不显示了!)

例子:

js:

const jade = require('jade');

console.log(jade.renderFile('./xxx.jade',{pretty:true,name:'singsingasong'}))

jade:

'|'的应用

9413bb4d7188f0a5f59c5f4990fde079.png

'.'的应用

ab5abc224f0f5c1086dd61fe6f0d0056.png

488d9e3b4a52b141d2b9bcf05c1dbb28.png

include的应用

c1b2848381ddf319ef63af4436e12ad0.png

调用变量做运算

de19de54f4460803991b67c18be8fa54.png

p的class

bda3bd2eee219b0920dc1e10a62b0e39.png

'-' 的应用

d48bb6633a2ce5bb7fcbcd722958c9b8.png

变量的直接引用

span#{a}和span=a效果是一样的。

jade中的for循环

jade:

-for(var i=0;i

p=arr[i]

js文件:

console.log(jade.renderFile('./views/11.jade',{pretty:true,name:'singsingasong',

arr:['aaa','bbb','ccc','ddd']

}));

运行结果:

375ff7ec94e000f75b70153fd1eac30f.png

'!' 的应用

html

head

body

p(class='1')!=content

p(class='2')

运行结果:

9811d8dea3439e5818dd5b03ba4b68a6.png

jade的if...else...

html

head

body

-var a=19;

if(a%2==0)

p(style={background:'red'}) 偶数

else

p(style={background:'green'}) 奇数

5cce87e39a4d6e0bc65c3bda4383c176.png

case语句

html

head

body

-var a=1;

case a

when 0

p aaa

when 1

p bbb

when 2

p ccc

default

|不靠谱

cdd08faa6cc6ab819c1e55138451f806.png

综合的来一个

小提示:之前的jade文件我们都没有写DOCTYPE,这里给它加上

3212ad44a1cdfa9304f7e94ca3dd9547.png

这个执行结果的是:如果文件读写顺利就输出‘成功',如果出错,就返回‘错误'。

相关推荐:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值