属性

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

jade：

a(href='google.com') Google

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

input(

  type='checkbox'

  name='agreement'

  checked

)

html：

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

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

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

对于正常的javascript表达式，jade也可以应付。

jade：

- var authenticated = true

body(class=authenticated ? 'authed' : 'anon')

html：

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

特殊属性

对于某些特殊符号，比如<,>等等，在jade编译生成html后，将会变成&lt;,&gt;，所以对于此类符号采取如下写法。

jade：

div(escaped="<code>")

div(unescaped!="<code>")

html：

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

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

布尔型属性

某些属性在jade中接受bool值（false的话则在编译后生成的html中无该属性），无初值默认为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属性

通过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，请保证用户输入合法。

Jade之属性的更多相关文章

  1. Jade模板引擎(一)之Attributes

    目录: Attributes Boolean Attributes Style Attributes Class Attributes &Attributes Attributes jade中 ...

  2. 令人惊叹的Visual Studio Code插件

    vscode是一款开源且优秀的编辑器,接下来让我吐血推荐一下我工作使用过的令人惊叹的Visual Studio Code插件. 代码编辑插件 vscode-color-highlight ------ ...

  3. jqu

    1 /*2 * 说明:3 * 本源代码的中文注释乃Auscarlin呕心沥血所作.旨在促进jQuery的传播以及向广大jQuery爱好者提供一个进阶4 *的途径,以让各位更加深入地了解jQuery,学 ...

  4. jade属性怎么写

    关于元素和标签,可能傻傻分不清楚,什么是元素,什么是标签,举个例子 比如div是一个块状元素,那么尖括号包起来的是标签,他用来标记这个元素,尖括号里面是元素名,元素是由开始和结束标签组成,用来包含内容 ...

  5. Jade模板引擎让你飞

    写在前面:现在jade改名成pug了 一.安装 npm install jade 二.基本使用 1.简单使用 p hello jade! 渲染后: <p>hello jade!</p ...

  6. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  7. Jade 模板引擎使用

    在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...

  8. jade模板

    jade 模板使用 npm install jade -g      安装到全局 jade index.jade         导出一个 index.html 压缩后的 jade -P index. ...

  9. nodejs学习篇 (1)webstorm创建nodejs + express + jade 的web 项目

    之前简单了解过nodejs,觉得用nodejs来做个网站也太麻烦了,要自己拼html的字符串返回,这能做网站嘛? 最近看到使用jade模板来开发,觉得挺新奇的,于是试了一把,也了解了一些特性,算是个新 ...

随机推荐

  1. 创建线程方式-GCD

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  2. 【练习】flashback基于scn的闪回查询

    1.创建表dept1: :: SCOTT@ORA11GR2>create table dept1 as select * from dept; Table created. :: SCOTT@O ...

  3. 转：Connection: close和Connection: keep-alive有什么区别？

    原文:http://www.cnblogs.com/TinyMing/p/4597136.html 一.问题现象: 一个JSP页面,居然要耗时40多秒.网页中有大量的图片的CSS问题解决: 原因也找了 ...

  4. spring 获取 bean

    不通过注解或者是配置文件怎么获取spring中定义的bean呢?有几个方法: 1.实现ApplicationContextAware <bean class="com.xxx.Spri ...

  5. Android开发--微信布局（ListView）基本运用

    ListView 1．ListVeiw 用来展示列表的View. 2．适配器 用来把数据映射到ListView上的中介. 3．数据    具体的将被映射的字符串,图片,或者基本组件. 根据列表的适配器 ...

  6. <读书笔记>软件调试之道 ：实证方法

    有效调试不仅仅是排除缺陷,其包含如下几个步骤 弄明白软件为何运行错误 修复这个问题 避免破坏其它部分 保持或者提高代码的总体质量 确保同样的问题不在其它地方发生,也不会再次发生 构建实验.观察结果 依 ...

  7. java笔记1

    第五天学习笔记 1.面对对象的理解并举例? 面对对象的核心:找合适的对象做合适的事情. 面对对象编程的思想:尽可能的用计算机语言来描述现实生活中的事物. 面对对象:侧重于对象 2.类与对象之间的关系? ...

  8. 第九十八天请假 PHP TP框架 空操作和命名空间

    访问空方法解决办法->在控制器里面创建 _empty 方法 <?php namespace Home\Controller; use Think\Controller; class Ind ...

  9. Docker常用操作

    启动容器并安装package docker run xxx apt-get -y xxx 其中-y要加上避免无法交互 批量删除容器 docker ps -a | awk '{print $1}' |x ...

  10. C++ MFC获取软件运行目录 （包含软件名）

    TCHAR *path = new TCHAR[MAX_PATH];   GetModuleFileName(NULL,path,MAX_PATH); AfxMessageBox(path);