溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“jade語法實例分析”，內容詳細，步驟清晰，細節處理妥當，希望這篇“jade語法實例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
標簽
自動閉合功能 p==> <p></p>
input ==> <input/>
嵌套標簽的寫法
p hello world <b>你好世界</b>
輸入 <p>hello world <b>你好世界</b> </p>
標簽中出現大段塊內容
一：在標簽后面添加 " . "
script.
console.log("hello world")
console.log("hello world")
二：在每段前面加 “ | ”
script
| console.log("hello world")
| console.log("hello world")
生成：
<script>
console.log("hello world")
console.log("hello world")
</script>
屬性用 () 分割 a（href="#"）跳轉 ==> <a href="#">跳轉</a>
單行注釋 //h2 多行注釋// h2 不輸出注釋 //-
添加一個doctype html 就可以輸出為<!DOCTYPE html>
設置id classname
#content 如果不設置標簽則默認為div
p#cont
a.btn
a#download.btn.btn-default
輸出結果為：
<div id="content"></div>
<p id="cont"></p>
<a class="btn"></a>
<a id="downnload" class="btn btn-default"></a>
不被緩沖的代碼
-for（var i=0;i<3;i++）
li hello world
執行結果：
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
被緩沖的代碼
p=hello world ==> <p>hello world</p>
p=hello world <b>abc</b> ==> <p>hello world <b>abc</b></p>
不想被轉譯：
p!=hello world <b>abc<b> ==> <p>hello world <b>abc</b></p>
使用變量
-var name = "Dream_Mz"
p my name is #{name} ==><p>my name is Dream_Mz</p>
如果要輸出 #{} 需要用 "\" 轉譯 \#{}
-var name = "<script></script>"
| #{name} ==><script></script>
不想轉譯：
| ！{name} ==> <script></script>
提示： " | "是一個管道 一般可以定義一段文本
循環
each val[,key] in OBJ val 是值 key是鍵（可以不寫） obj是對象或者數組
#{key}：#{val}
-var name = {"key":123,"key2":456,"key3":789}
each val,key in name
h4 #{key} 的值是 #{val}
case 作用和js中的switch一樣的
-var apple = 1
case apple
when 0
p you have no apple
when 1
p you have an apple
default
p you have #{apple} apple
==> <p>you have an apple</p>
寫法二：
-var apple = 1
case apple
when 0: p you have no apple
when 1: p you have an apple
default : p you have #{apple} apple
合并when的值：
-var apple =1
case apple
when 0
when 1
p you have few apple
default : p you have #{apple} apple
當apple的值為0/1的時候輸出<p>you have few apple</p>
當apple的值不為0/1的時候 輸出<p>you have #{apple} apple</p>
mixin函數的支持
mixin setName(name,age)
ul
li 我叫 #{name}
li 我今年 #{age} 歲了
ul
+setName("張三",19)
帶有塊的mixin
mixin getInfo(name,age)
ul
li 我是 #{name}
li 我今年 #{age}
if block
block
ul
+getInfo("李四",18)
li 我來自China
li hello world
接受外部的類或屬性
mixin link(href,name)
a(class!=attributes.class,title!=attributes.title,href=href).btn1=name
+link("#","abc")(class="btn",title="我是按鈕")
<a title="我是按鈕" href="#" class="btn btn1">abc</a>
讀到這里，這篇“jade語法實例分析”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
