Jade之属性

时间 2019-11-16

标签 jade 属性栏目 Node.js 繁體版

原文原文链接

属性

全部的html(5)标签在jade中均支持以下写法。jade中省去了html<>和标签的关闭等写法，并将属性写在括号之中。若存在多个属性，能够将其分为多行。javascript

jade：html

a(href='google.com') Google
a(class='button', href='google.com') Google

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

html：java

<a href="google.com">Google</a>
<a href="google.com" class="button">Google</a>

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

对于正常的javascript表达式，jade也能够应付。数组

jade：google

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

html：code

<body class="authed"></body>

特殊属性

对于某些特殊符号，好比<,>等等，在jade编译生成html后，将会变成<,>，因此对于此类符号采起以下写法。htm

jade：对象

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

html：ip

<div escaped="&lt;code&gt;"></div>
<div unescaped="<code>"></div>

布尔型属性

某些属性在jade中接受bool值（false的话则在编译后生成的html中无该属性），无初值默认为true。jade

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属性

经过JS能够将style属性封装在一个类中，也能够将style属性的值赋为一个字符串。

jade：

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

html：

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

class属性

class属性支持数组赋值。

jade：

//- 预约义数组后赋值
- var classes = ['foo', 'bar', 'baz']
a(class=classes)

//- 无名数组
a(class=['bing', 'bat'])

//- 多个属性值，能够合并，而且不去重
a.baz(class=classes class=['bing', 'bar'])

html：

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

<a class="bing bat"></a>

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

class、id

由于class属性和id属性会常用到，因此jade容许简化写法。

对于class能够直接.value表示class="value"，对于id能够直接#value表示id="value"。

由于div也会常常用到，jade容许div能够省去。

jade：

a.button

.content

html：

<a class="button"></a>

<div class="content"></div>

&attributes

&attributes（做用？）能够添加一个对象做为属性（能够为对象变量）的一部分。

jade：

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

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

html：

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

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

由于使用了&attributes的属性不会自动逃逸，因此为了防止cross-site scripting，请保证用户输入合法。

1. jade入门系列之属性
2. jade模板之二，标签和属性
3. Jade学习（一）之特性、安装
4. Swift之属性
5. VUE之属性
6. swift之属性
7. Jade之Doctype
8. Jade之Plain Text
9. Jade之Mixins
10. Jade之Code
更多相关文章...
• WebSecurity 属性 - CurrentUserName - ASP.NET 教程
• WebSecurity 属性 - HasUserId - ASP.NET 教程
• 互联网组织的未来：剖析GitHub员工的任性之源
• JDK13 GA发布：5大特性解读