当前位置:Gxlcms > html代码 > Jade模板引擎(一)之Attributes_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:26人阅读

目录:

  • 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漏洞。

    人气教程排行