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大特性解讀

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。