jade的高级语法

最新推荐文章于 2019-07-26 18:55:00 发布

qizidehaijiao

最新推荐文章于 2019-07-26 18:55:00 发布

阅读量313

点赞数

分类专栏：前端-js

本文链接：https://blog.youkuaiyun.com/qizidehaijiao/article/details/79295730

版权

前端-js 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了Jade模板语言的高级特性，包括原样输出、包含HTML文件、数据绑定、代码解析、循环结构、条件判断（if和switch）的使用，帮助开发者更高效地利用Jade进行开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jade的高级语法

原样输出|和.和include js文件
|

html
    head
        script
            |alert("ddd");
            |alert("bbb");
//jade解析之后
<html>
    <head>
        <script>
            alert("ddd");
            alert("bbb");
        </script>
    </head>
</html>

点.

html
    head
        script.//注意这是点
            alert("ddd");
            alert("bbb");
//jade解析之后
<html>
    <head>
        <script>
            alert("ddd");
            alert("bbb");
        </script>
    </head>
</html>

include

html
    head
        script
            include a.js
//jade解析之后
<html>
    <head>
        <script>
            alert("ddd");
            alert("bbb");
        </script>
    </head>
</html>

绑定数据
#{}

var str = jade.renderFile('./views/1.jade',{pretty:true,
    json:{width:'200px',height:'200px',background:'red'},
    arr:['aaa','myclass','item']
);

console.log(str);

//1.jade
body
    p(style=json,class=arr)

横杠，解析为代码

body
    -var a = 2
    -var b = 3
    div #{a+b}//或者写成div=a+b

循环

var str = jade.renderFile('./views/1.jade',{pretty:true,arr:['aaa','myclass','item']
);

console.log(str);
body
    -for(var i=0;i<arr.length;i++)
        div=arr[i]

读html，价格叹号

var str = jade.renderFile('./views/1.jade',{pretty:true,content:'<h2>我是个标题</h2>'
);

console.log(str);

body
    div!=content

if的使用

var str = jade.renderFile('./views/1.jade',{pretty:true,content:'<h2>我是个标题</h2>'
);

console.log(str);

body
    -var a = 12
    -if(a%2==0)
        div(style={background:'red'}) #{a}是偶数
    -else
        div(style={background:'green'}) #{a}是奇数

switch,不用加横杠，且换成case，只要下面的都是代码就可以省略后面的横杠

var str = jade.renderFile('./views/1.jade',{pretty:true});

console.log(str);

body
    -var a = 3
    case a
        when 0
            div a是#{a}
        when 1
            div a是#{a}
        when 2
            a是#{a}
        default
            |不靠谱
            
//结果
<body>不靠谱</body>