有關jade模板引擎的使用詳情-js教程-PHP中文網

有關jade模板引擎的使用詳情

亚连

發布： 2018-06-21 11:27:14

原創

1556 人瀏覽過

下面小編就為大家分享一篇基於模板引擎Jade的應用程式詳解，具有很好的參考價值，希望對大家有幫助。一起跟著小編過來看看吧

有用的符號：

| 豎槓後的字元會被原樣輸出· 點表示下一層的所有字元都會被原樣輸出，不再被辨識。（就是|的升級版，實現批次） include 表示引用外部文件

短槓說明後面跟著的字元只是一段程式碼（與|的差別就是，|後面的內容會被顯示，而短槓後面的內容直接不顯示了！）

範例:

js:

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

登入後複製

jade：

##'|'的應用程式

'.'的應用程式

include的應用

呼叫變數做運算

p的class

'-' 的應用程式

變數的直接引用

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

jade中的for迴圈

jade：

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

登入後複製

js檔案：

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

登入後複製

執行結果：

'!' 的應用程式

html
 head
 body
 p(class=&#39;1&#39;)!=content
 p(class=&#39;2&#39;)

登入後複製

運行結果：

jade的if...else...

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

登入後複製

case語句

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

登入後複製

#####綜合的來一個###############小提示：######之前的jade檔案我們都沒有寫DOCTYPE,這裡給它加上## #############這個執行結果的是：如果檔案讀寫順利就輸出'成功'，如果出錯，就回傳'錯誤'。 ######上面是我整理給大家的，希望今後對大家有幫助。 ######相關文章：#########在vuejs中使用模組化的方式開發############在VUE中如何實作陣列更新功能### #########如何使用vue-cli實作多頁應用############在HTML5 JS JQuery ECharts中如何實作非同步載入問題#######

以上是有關jade模板引擎的使用詳情的詳細內容。更多資訊請關注PHP中文網其他相關文章！