pug模板引擎（原jade）之 属性
强调：所有javascript表达式都能用
属性 Attribute
多行属性（可以换行写）： 可以搭配模板字符串
input(type='checkbox' name='agreement' checked)
用引号括起来的属性
div(class='div-class' (click)='play()')
属性嵌入
var btnType = 'info' var btnSize = 'lg' button(type='button' class='btn btn-'+btnType+' btn-'+btnSize)
不转义的属性
div(escaped!="<code>") 注：使用'!=' 表示不转义，即 '<' 不用转义为 '<'
布尔值属性
input(type='checkbox' checked=false) 注：checkd 不给值，默认是true,pug是经过映射的
样式属性：样式属性可以写成对象形式
a(style={color:'red',background:'green'})
类属性： 可以赋值为数组，可以写成数组，可以写成对象（一般用于判断）
var classes=['foo','bar','baz'] a(class=classes) 还可以通过判断映射 var currentUrl ='/about' a(class={active:currentUrl==='/'} href='/') Home a(class={active: currentUrl === '/about'} href='/about') About 转义内容为： <a href="/">Home</a> <a class="active" href="/about">About</a>
类的字面量
a.button 编译为：<a class="button"></a>
类属性+类的字面量
a.bang(class=classes class=['bing']) 编译为：<a class="bang foo bar baz bing"></a>
ID的字面量
a#main-link 编译为：<a id="main-link"></a>
$attributes
1 2 3 4 5 6 7 8 | div#foo(data-bar="foo")&attributes({'data-foo': 'bar'})或者- var attributes = {};- attributes.class = 'baz';div#foo(data-bar="foo")&attributes(attributes)编译为：<div class="baz" id="foo" data-bar="foo"></div> |
特别说明：
doctype html
注：pug是没有进行映射属性的，而是使用缩写样式（terse style）
编译后为： <!DOCTYPE html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
2016-05-18 泛型之Dictionary