基于模板引擎Jade的應(yīng)用(詳解)

發(fā)布時(shí)間：2020-10-14 22:31:20 來(lái)源：腳本之家閱讀：139 作者：SingSingaSong 欄目：web開(kāi)發(fā)

有用的符號(hào)：

| 豎杠后的字符會(huì)被原樣輸出 · 點(diǎn)表示下一級(jí)的所有字符都會(huì)被原樣輸出，不再被識(shí)別。（就是|的升級(jí)版，實(shí)現(xiàn)批量） include 表示引用外部文件

短杠說(shuō)明后面跟著的字符只是一段代碼（與|的區(qū)別就是，|后面的內(nèi)容會(huì)被顯示，而短杠后面的內(nèi)容直接不顯示了?。?/p>

例子:

js：

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

jade：

'|'的應(yīng)用

基于模板引擎Jade的應(yīng)用(詳解)

'.'的應(yīng)用

基于模板引擎Jade的應(yīng)用(詳解)

include的應(yīng)用

基于模板引擎Jade的應(yīng)用(詳解)

調(diào)用變量做運(yùn)算

基于模板引擎Jade的應(yīng)用(詳解)

div的class

基于模板引擎Jade的應(yīng)用(詳解)

'-' 的應(yīng)用

基于模板引擎Jade的應(yīng)用(詳解)

變量的直接引用

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

jade中的for循環(huán)

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']
}));

運(yùn)行結(jié)果：

基于模板引擎Jade的應(yīng)用(詳解)

'!' 的應(yīng)用

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

運(yùn)行結(jié)果：

基于模板引擎Jade的應(yīng)用(詳解)

jade的if...else...

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

基于模板引擎Jade的應(yīng)用(詳解)

case語(yǔ)句

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

基于模板引擎Jade的應(yīng)用(詳解)

綜合的來(lái)一個(gè)

小提示：之前的jade文件我們都沒(méi)有寫(xiě)DOCTYPE,這里給它加上

基于模板引擎Jade的應(yīng)用(詳解)

這個(gè)執(zhí)行結(jié)果的是：如果文件讀寫(xiě)順利就輸出‘成功'，如果出錯(cuò)，就返回‘錯(cuò)誤'。

以上這篇基于模板引擎Jade的應(yīng)用(詳解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡