您好,欢迎访问一九零五行业门户网

Jade模板引擎(一)之Attributes_html/css_WEB-ITnose

目录:
attributes boolean attributes style attributes class attributes &attributes attributes
jade中的属性和html中的属性并没有什么太大区别, 值也和js的规则没有什么两样。
1. js表达式
    jade: 
- var authenticated = truea(class=authenticated ? 'authed' : 'anon')
html:

2. 多属性换行
jade:
input( type='checkbox' name='agreement' checked)
html:

3. 非转义属性(unescaped attributes)
默认情况下, 所有属性都是转义过的。这样做是为了安全起见,防止xss攻击。如果需要使用特殊字符,可以使用!=替代=。
jade:
div(escaped=)div(unescaped=)
html:

boolean attributes
在jade中, 属性值可以是bool值(true or false), 不设置值则默认是true。
jade:
input(type='checkbox', checked)input(type='checkbox', checked=true)input(type='checkbox', checked=false)input(type='checkbox', checked=true.tostring())
html:

style attributes
style属性可以是一个string也可以是一个object。比如json格式的对象形式。
jade:
a(style={color: 'red', background:'green'})
html:

class attributes
class属性可以是一个string也可以是一个定义的class的数组对象。
jade:
- var classes = ['foo', 'bar', 'baz']a(class=classes)a.bing(class=classes class=['bing'])
html:

同样可以通过使用条件的形式来实现。
jade:
- var currenturl = '/about'a(class={active: currenturl === '/'} href='/') homea(class={active: currenturl === '/about'} href='/about') about
html:
homeabout
&attributes
&attributes可以将其两边的属性对象都加入到元素当中。
jade:
- var attributes = {'data-foo': 'bar'}div#foo(data-bar='foo')&attributes(attributes)
html

注: 在使用&attributes的情况下, 它并没有实现自动转义。所以需要通过一定的手段来确保你的页面不会出现xss漏洞。
其它类似信息

推荐信息