首页 > 开发 > Javascript > 正文

基于模板引擎Jade的应用(详解)

2019-10-24 21:26:04
字体:
来源:转载
供稿:网友

有用的符号:

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

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

例子:

js:

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

jade:

'|'的应用

模板引擎,Jade

'.'的应用

模板引擎,Jade

模板引擎,Jade

include的应用

模板引擎,Jade

调用变量做运算

模板引擎,Jade

div的class

模板引擎,Jade

'-' 的应用

模板引擎,Jade

变量的直接引用

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

jade中的for循环

jade:

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

js文件:

console.log(jade.renderFile('./views/11.jade',{pretty:true,name:'singsingasong', arr:['aaa','bbb','ccc','ddd']}));

运行结果:

模板引擎,Jade

'!' 的应用

html head body div(class='1')!=content div(class='2')

运行结果:

模板引擎,Jade

jade的if...else...

html head body -var a=19; if(a%2==0)  div(style={background:'red'}) 偶数 else  div(style={background:'green'}) 奇数

模板引擎,Jade

case语句

html head body -var a=1; case a  when 0  div aaa  when 1  div bbb  when 2  div ccc  default  |不靠谱

模板引擎,Jade

综合的来一个

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

模板引擎,Jade

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

以上这篇基于模板引擎Jade的应用(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持CuoXin错新网。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表