[js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义

来源:小波SEO   更新时间:2018-07-06 11:20:39   

关于:[js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义,今日小波说事SEO分析: 一、转义与非转义jade模板文件代码:[url=][/url]
1 doctype html 2 html 3 head 4 meta(charset='utf-8') 5 title jade学习-by ghostwu 6 body 7 h3转义与非转义 8
一、转义与非转义jade模板文件代码:[url=][/url]
1 doctype html 2 html 3 head 4 meta(charset='utf-8') 5 title jade学习-by ghostwu 6 body 7 h3转义与非转义 8 - var userName = 'ghostwu' 9 - var str = '<script>alert("ghostwu");</script>'10 div #{userName}11 div #{str}12 div !{str}13 div= userName14 div= str15 div!= str16 div \#{userName}17 div \!{str}18 div(data-innerHTML=age)19 div(data-innerHTML='#{age}')20 div(data-innerHTML='#{userName}')[url=][/url]

编译之后的效果:解释:#{} : 带有转义效果的输出!{}: 不转义输出= : 与#{}效果相同!= : 与!{}效果相同\#{}:原样输出#{}属性后面跟#{age},会把变量解释出来,如果这个变量没有定义,就会输出undefined。在实际情况中,如果没有定义的变量就不要输出,我们可以直接这样做 属性=变量名,他会自动判断该变量是否设置,决定是否输出变量的值或者不要输出属性,如 div(data-innerHTML=userName)userName我们设置了,所以会编译输出<div data-innerHTML="ghostwu"></div>二、流程控制(循环) jade文件代码: View Code
编译之后的结果: View Code
循环的语法跟原生js差不多,each这里的val, key是当前数组的值和键.三、条件判断语句编译之后的结果:if.else很好理解,跟原生js一样unless: 给定条件是否不符合要求,如果不符合,就执行下一步.switch...case语句在jade中的写法 View Code

编译之后:

相关文章