其他分享
首页 > 其他分享> > pug模板引擎(原jade)之 属性

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>

 

 

 

 

 

   

 

标签:jade,pug,var,attributes,div,foo,class,模板,属性
来源: https://www.cnblogs.com/zmztya/p/14782082.html