pug模板引擎（原jade）之属性

2021/5/18 18:28:16

编程Tag： 属性 var class 模板 pug div Jade foo attributes

本文主要是介绍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>")
注：使用'!=' 表示不转义，即 '<' 不用转义为 '&lt'

布尔值属性

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

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>

这篇关于pug模板引擎（原jade）之属性的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

pug模板引擎（原jade）之 属性

属性 Attribute

相关编程文章

pug模板引擎（原jade）之属性