Heim >Web-Frontend >HTML-Tutorial >Jade模板引擎(一)之Attributes_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:31:491329Durchsuche

目录:

  • Attributes
  • Boolean Attributes
  • Style Attributes
  • Class Attributes
  • &Attributes
  • Attributes

    jade中的属性和html中的属性并没有什么太大区别, 值也和js的规则没有什么两样。

    1. js表达式

        jade: 

    - var authenticated = truea(class=authenticated ? 'authed' : 'anon')

        html:

    <a class="authed"></a>

    2. 多属性换行

        jade:

    input(  type='checkbox'  name='agreement'  checked)

        html:

    <input type="checkbox" name="argeement" checked="checked" />

    3. 非转义属性(Unescaped Attributes)

        默认情况下, 所有属性都是转义过的。这样做是为了安全起见,防止XSS攻击。如果需要使用特殊字符,可以使用"!="替代"="。

        jade:

    div(escaped="<code>")div(unescaped="<code>")

        html:

    <div escaped="<code>"></div><div unescaped="<code>"></div>

    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:

    <input type="checkbox" checked="checked" /><input type="checkbox" checked="checked" /><input type="checkbox" /><input type="checkbox" checked="true" />

    Style Attributes

        style属性可以是一个string也可以是一个object。比如json格式的对象形式。

        jade:

    a(style={color: 'red', background:'green'})

        html:

    <a style="color:red;background:green"></a>

    Class Attributes

        class属性可以是一个string也可以是一个定义的class的数组对象。

        jade:

     

    - var classes = ['foo', 'bar', 'baz']a(class=classes)a.bing(class=classes class=['bing'])

        html:

    <a class="foo bar baz"></a><a class="bing foo bar baz bing"></a>

        同样可以通过使用条件的形式来实现。

        jade:

    - var currentUrl = '/about'a(class={active: currentUrl === '/'} href='/') Homea(class={active: currentUrl === '/about'} href='/about') About

        html:

    <a href="/">Home</a><a href="/about" class="active">About</a>

    &Attributes

    &attributes可以将其两边的属性对象都加入到元素当中。

        jade:

    - var attributes = {'data-foo': 'bar'}div#foo(data-bar='foo')&attributes(attributes)

        html

    <div id="foo" data-bar='foo' data-foo='bar'></div>

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

    Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn