jade的使用(二)

评论 分享

1、jade的变量的使用：

(1)使用 “=” 号输出变量值到元素内；
(2)通过 #{variable} 插入相应的变量值
(3)= 默认会转义内容，如果不被转义的，在=前面添加!
(4)如果要输出 #{},那就得使用\来转义 #{};
(5)#{}内容默认特殊字符会被转义，如要不转义的，用!替换#来调用

例如：

1
2
3
4
5
6
- var name = 'welcome,<span>hello;</span>'
p= 'welcome,<span>hello;</span>'
p!= 'welcome,<span>hello;</span>'
p #{name}
p \#{name}
p !{name}

转换结果：

1
2
3
4
5
<p>welcome,&lt;span&gt;hello;&lt;/span&gt;</p>
<p>welcome,<span>hello;</span></p>
<p>welcome,&lt;span&gt;hello;&lt;/span&gt;</p>
<p>#{name}</p>
<p>welcome,<span>hello;</span></p>

2、jade 支持 循环、if、case条件判断

(1)循环语法结构：

1
2
3
4
5
- each val[,key] in obj
     val是值
     key是键，可选
     obj是对象，array or object
- for (var i = 0; i < 3; i++)

(2)if语法结构：

1
2
3
4
if(判断)
    //操作
else
   //操作

(3)case语法结构：

1
2
3
4
5
6
7
8
case 条件
    when 条件一
       //操作
    when 条件二
       //操作
        ·
    default 其他条件
       //操作

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//for循环
- for (var i = 0; i < 3; i++)
	li 排名
//数组
- var jobs = ["第一", "第二", "第三"]
each job in jobs
	li= job
//对象
- var jobs = {"第一":"梨", "第二":"苹果", "第三":"芒果"}
each val,key in jobs
	li #{key} : #{val}
//if判断
- var apples = 1
if(apples>0)
	p you have some apples
else
	p you have no apples
//case选择
case apples
	when 0
		p you have no apples
	when 1
		p you have an apple
	default
		p you have #{apples} apples

结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//for循环
<li>排名</li>
<li>排名</li>
<li>排名</li>
//数组
<li>第一</li>
<li>第二</li>
<li>第三</li>
//对象
<li>第一 : 梨</li>
<li>第二 : 苹果</li>
<li>第三 : 芒果</li>
//if判断
<p>you have some apples</p>
//case选择
<p>you have an apple</p>

3、include 包含文件

使用 Includes 在模板中包含其他模板的内容。

1
2
3
head            #文件head.jade的内容
  title 我的网站
  script(src='/javascripts/swiper.js')

1
2
3
4
5
6
doctype html
html
  include jade/head.jade     #include + 文件地址
  body
     h1 我的网站
     p 欢迎来到我的网站。

结果：

1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html>
  <head>
    <title>我的网站</title>
    <script src='/javascripts/swiper.js'></script>
  </head>
  <body>
    <h1>我的网站</h1>
  </body>
</html>