pug

最新推荐文章于 2025-12-01 12:16:28 发布

原创最新推荐文章于 2025-12-01 12:16:28 发布 · 173 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document

        link(href="index.css",type="text/css",rel="stylesheet")
        script(src="one.js" type="text/javascript")

        style. 
            .mydiv{
                width:200px;
                height:200px;
                background:red;
            }

    body
        include common.pug
        h1 我是标题
        div 我是一个div
        div(class="mydiv") 我是类名为mydiv的div
            include common.pug
        .mydiv2(style={width:"100px",height:"100px",background:"yellow"}) 我是第二个div
        #myid 我是有id名的div
        p 我是P标签
        .my 我也是一个P

        //- 我是pug的注释，不会被读取
        //-
            我是第一行
            我是第二行

        // 我是html的注释，会被读取
        // 
            我是第一行
            我是第二行

        div 
            | hello

        //- 和 js 的结合使用
        //- 接收服务器断返还的数据
        p #{data}   

        //- 使用自身的数据
        - let str = "你好啊"
        p #{str}

        ul
            each item in users
                li 姓名:#{item.name};年龄:#{item.age};身高:#{item.height}
        
        - for(let i = 0; i < 4; i++)
            span 我是循环出来的数据#{i}
        
        - let num = "a"
            case num
                when 1
                    p num 是1
                when 2
                    p num 是2
                when 3
                    p num 是3
                default
                    p num 是其他值

        mixin mydiv
            div 我是非常常用的div
        +mydiv
        +mydiv
        +mydiv

        mixin pet(name,sex)
            p 这是一只#{name},他的性别是#{sex}
        +pet("哈士奇","公")
        +pet("萨摩耶","公")
        +pet("阿拉斯加","公")
        +pet("小涛","公")
        +pet("小涛","公")

        script(type="text/javascript").
            console.log(1)