zoukankan      html  css  js  c++  java
  • Jade模板引擎(一)之Attributes

    目录:

    Attributes

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

    1. js表达式

        jade: 

    - var authenticated = true
    a(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="&lt;code&gt;"></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='/') Home
    a(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漏洞。

  • 相关阅读:
    PL/SQL Developer 远程连接oracle数据库
    Python 类与对象 __init__()参数
    微信公众号--发送模板消息
    微信公众号--进入菜单之前获取用户信息
    微信公众号-自定义菜单
    Java--时间转换
    微信公众号--被动回复用户消息
    {"errcode":40017,"errmsg":"invalid button type hint: [I8nq_a0783sha1]"}
    在使用XStream时没有processAnnotations方法
    在idea的控制台中中文显示为乱码
  • 原文地址:https://www.cnblogs.com/MonkeyKingK/p/5042578.html
Copyright © 2011-2022 走看看