Thymeleaf 入门基础 | fanlychie

栏目: Html5 · 发布时间: 6年前

内容简介:Thymeleaf 入门基础 | fanlychie

Thymeleaf 是一个服务器端 Java 模板引擎 类似于 FreeMarker Velocity 等模板 它是 Java 服务器端 HTML5 开发的理想选择 并且能够很好的和 Spring Boot 集成

Thymeleaf 的主要目标是为 程序员 的开发工作流程带来优雅的自然模板 它可以作为静态原型来使用 这对前后端分离的开发团队来说无疑是一种很好的体验

Thymeleaf 开箱即用 它提供了一套标准方言 所有的数据都是通过标签 th:* 来完成 如:

<span th:text="${message}">Welcome to BeiJing!</span>

当它作为静态文件运行时 Thymeleaf 会过虑 th: 标签属性 显示静态文本值 Welcome to BeiJing!

当它运行在服务器环境时 Thymeleaf 会使用 th: 标签属性的值替换掉静态文本的值 动态显示 ${message} 的具体内容

除了上面提到的 th:text Thymeleaf 还提供了许多其他功能 这些功能对于大多数情况是足够满足日常开发的需求的 下面来一一做介绍

— 摘自 Spring Boot 添加 Thymeleaf 支持

如何使用 Thymeleaf 创建一个真正有效的 HTML5 文档?

welcome.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
 <head>
 <title>Welcome Page</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>
 <body>
 <span th:text="${message}">Welcome to BeiJing!</span>
 </body>
 </body>
</html>

正如你所见 这是一个 HTML5 页面文件 它可以直接在任何浏览器中正确显示(浏览器会自动忽略它们不能理解的属性 th:text

但这不是一个真正有效的 HTML5 文档 因为 HTML5 规范是不允许使用 th:* 这些非标准属性的

而且 我们还在 <html> 标签中添加了一个 xmlns:th 属性

<html xmlns:th="http://www.thymeleaf.org">

实际上 xmlns:th="http://www.thymeleaf.org" 在 Thymeleaf 模板引擎处理过程中完全没有任何影响 它只是用来防止 IDE 提示找不到 th:* 属性命名空间的错误(在 IntelliJ IDEA 中 th:* 属性变红色) 但这对页面的正常显示是毫无影响的

因此 我们甚至可以不使用 th:* 属性 我们可以切换到 Thymeleaf 的数据属性语法 data-th-* 替换 th:*

<!DOCTYPE HTML>
<html>
 <head>
 <title>Welcome Page</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>
 <body>
 <span data-th-text="${message}">Welcome to BeiJing!</span>
 </body>
 </body>
</html>

HTML5 规范是允许 data-* 这样自定义的属性的 至此 我们已经将模板改造成了一个真正有效的 HTML5 文档

th:*data-th-* 这两个符号是完全等效且是可以互换的 为了简单直观和代码的紧凑性 这里采用 th:* 的表示方式

标准表达式语法

Thymeleaf 提供了非常丰富的标准表达式语法 总共有 8 大类 它们分别是:

  • 简单表达式
  • 字面值
  • 文本操作
  • 算术运算
  • 布尔运算
  • 比较和相等
  • 条件运算
  • 无操作符

简单表达式

Thymeleaf 提供的简单表达式语法有 5 类 它们分别是:

语法 名称 描述 作用
${} Variable Expressions 变量表达式 取出上下文变量的值
*{} Selection Variable Expressions 选择变量表达式 取出选择的对象的属性值
#{} Message Expressions 消息表达式 使文字消息国际化 I18N
@{} Link URL Expressions URL 链接表达式 用于表示各种超链接地址
~{} Fragment Expressions 代码片段表达式 引用一段公共的代码片段

${…}

下面代码表示取出上下文环境中的 message 变量的值:

<span th:text="${message}"></span>

内置对象

跟 JSP 相像的 Thymeleaf 也为我们提供了一些内置的对象变量 它们都是以 # 开头表示:

对象 描述
#ctx 上下文对象
#vars 上下文变量
#locale 上下文区域变量
#request HttpServletRequest 对象
#response HttpServletResponse 对象
#session HttpSession 对象
#servletContext ServletContext 对象

举个栗子:

<!-- zh_CN -->
<p th:text="${#locale}"></p>
<!-- 小饭 -->
<p th:text="${#session.user.name}"></p>

工具类

另外 Thymeleaf 还提供了许多内置的 工具 它们也是以 # 开头:

对象 描述
#messages 消息工具类 #{} 作用相同;
#uris 地址相关的工具类
#conversions 对象转换工具类
#dates 日期时间工具类
#calendars 日历工具类
#numbers 数字工具类
#strings 字符串工具类
#objects 对象工具类
#bools 布尔工具类
#arrays 数组工具类
#lists List 工具类
#sets Set 工具类
#maps Map 工具类

举个栗子:

<p th:text="${#lists.isEmpty(cities)}"></p>
<p th:text="${not #lists.isEmpty(cities)}"></p>
<!-- 2017年4月8日 下午09时01分12秒 -->
<p th:text="${#dates.format(now)}"></p>
<!-- 2017-04-08 21:01:12 -->
<p th:text="${#dates.format(now, 'yyyy-MM-dd HH:mm:ss')}"></p>

*{…}

使用 *{} 表达式时 如果没有选择对象 那么 *{}${} 表达式所达到的效果是完全相同的:

<p th:text="${user.name}"></p>
<p th:text="*{user.name}"></p>

*{} 表达式的上下文是父标签( th:object )所选择的对象 ${} 表达式是面向整个上下文的 这是 *{}${} 表达式语法的一个重要的区别

<div th:object="${user}">
 <p>姓名: <span th:text="*{name}"></span></p>
 <p>性别: <span th:text="*{sex}"></span></p>
 <p>年龄: <span th:text="*{age}"></span></p>
</div>

它相当于:

<div>
 <p>姓名: <span th:text="${user.name}"></span></p>
 <p>性别: <span th:text="${user.sex}"></span></p>
 <p>年龄: <span th:text="${user.age}"></span></p>
</div>

#{…}

首先我们来了解一下 i18n 资源文件的命名规则:

  • basename.properties
  • basename_language.properties
  • basename_language_country.properties

其中 basename 是自定义的资源文件名称 languagecountry 必须是 Java 支持的语言和国家 basename.properties 是缺省加载的资源文件 它是必须存在的 当客户端根据本地语言查找不到相关的资源文件时 则使用 basename.properties

处理静态消息

我们来创建以下几个文件:

1. /src/main/resources/i18n/messages.properties

welcome.message=北京欢迎你!

2. /src/main/resources/i18n/messages_en_US.properties

welcome.message=Welcome to BeiJing!

3. /src/main/resources/application.properties (Spring Boot)

spring.messages.basename:i18n/messages

举个栗子:

<!-- 北京欢迎你! -->
<p th:text="#{welcome.message}"></p>

处理非静态消息

#{} 表达式是不允许直接处理非静态消息的 我们可以在资源文件中使用占位符 {} 来处理非静态消息:

/src/main/resources/i18n/messages.properties

welcome.user={0}<span class="fuhao">,</span>欢迎来到北京!

使用时 通过消息的键值以参数的形式来传递变量:

<!-- 小饭<span class="fuhao">,</span>欢迎来到北京! -->
<p th:text="#{welcome.user(${user.name})}"></p>

@{…}

在 WEB 应用开发里面 URL 链接地址是非常常见的 @{} 表达式就是专门用来处理 URL 链接的:

<!-- /css/mian.css -->
<p th:text="@{/css/mian.css}"></p>
<!-- /css/mian.css?v=1.0 -->
<p th:text="@{/css/mian.css(v=1.0)}"></p>
<!-- /user/order?uid=1001 -->
<p th:text="@{/user/order(uid=${user.id})}"></p>
<!-- /user/order?uid=1001&status=PAIED -->
<p th:text="@{/user/order(uid=${user.id},status='PAIED')}"></p>
<!-- /user/1001/info -->
<p th:text="@{/user/{uid}/info(uid=${user.id})}"></p>

绝对地址:

<!-- http://fanlychie.github.io -->
<p th:text="@{http://fanlychie.github.io}"></p>

页面相对地址:

<!-- commons/base.html -->
<p th:text="@{commons/base.html}"></p>

上下文相对地址(相对于当前的服务):

<!-- /css/mian.css -->
<p th:text="@{/css/mian.css}"></p>

服务器相对地址(相对于部署在同一个服务器中的不同服务):

<!-- /image/upload -->
<p th:text="@{~/image/upload}"></p>

~{…}

当需要引用某个模板文件的公共的 HTML 代码片段时 可以使用 ~{} 语法:

语法 描述
~{templatename :: selector} selector 可以是 th:fragment 指定的名称 如 ~{footer :: base}
也可以是其他选择器 如类选择器 ID选择器等;
~{templatename} 引用整个模板文件的代码片段;
~{::selector} 相当于 ~{this :: selector} 表示引用当前模板定义的代码片段;

具体使用参考模板布局章节

字面值

什么是字面值?首先它不是一个变量 它是一个具体的确切的值 通常这些值是比较简单的 例如: 18 'welcome' 它们没有名称 以至于我们只能用值来称呼它们 因此我们称其为字面值

文字字面值

文字字面值是用单引号引起来的任何字符内容 如果字符内容里面含有单引号 则需要进行转义:

<!-- Welcome to BeiJing! -->
<p th:text="'Welcome to BeiJing!'"></p>
<!-- 'Welcome to BeiJing!' -->
<p th:text="'\'Welcome to BeiJing!\''"></p>

数字字面值

<!-- 2017 -->
<p th:text="2017"></p>
<!-- 2018 -->
<p th:text="2017 + 1"></p>

布尔字面值

<!-- false -->
<p th:text="1 > 2"></p>
<!-- 否 -->
<p th:text="1 > 2 ? '是' : '否'"></p>

空字面值

<!-- false -->
<p th:text="${user == null}"></p>

字面令牌

字面令牌(Literal Tokens)的内容只能含有(不能含有空格 特殊符号等):

  • 大小写的字母
  • 0 到 9 的数字
  • 中括号
  • 下划线
  • 连字符(-)
  • 点(.)
  • 中文(官网文档未提及)
  • 还有其他的?

实际上 数字 布尔和空字面值都是字面令牌的特殊情况

字面令牌能够用来对标准表达式语法进行简化(可以将包裹它的单引号去掉):

<p th:text="BeiJing"></p>

它等效于:

<p th:text="'BeiJing'"></p>

文本操作

文本操作包含字符连接和替换的操作

字符串连接

不管是字面值还是表达式的结果 我们都可以使用 + 符号将它们连接起来:

<!-- Welcome to BeiJing! -->
<p th:text="'Welcome to ' + ${province.name} + '!'"></p>

字面值替换

|| 符号可以用来将字面值和表达式包裹起来 这样就能方便的替换变量的值 而不需要使用 + 连接符:

<!-- Welcome to BeiJing! -->
<p th:text="|Welcome to ${province.name}!|"></p>

算术运算

支持 + (加) - (减) * (乘) / (除) % (模)运算:

<!-- 6 -->
<p th:text="4 + 2"></p>
<!-- 2 -->
<p th:text="4 - 2"></p>
<!-- 8 -->
<p th:text="4 * 2"></p>
<!-- 2 -->
<p th:text="4 / 2"></p>
<!-- 0 -->
<p th:text="4 % 2"></p>

布尔运算

支持 and (且) or (或) ! (非) not (非)运算:

<p th:text="${user.online and user.vip}"></p>
<p th:text="${user.online or user.vip}"></p>
<p th:text="${!user.online}"></p>
<p th:text="${not user.online}"></p>

比较和相等

支持 <lt >gt <=le >=ge ==eq !=ne ):

<p th:text="${user.age < 60}"></p>
<p th:text="${user.age <= 60}"></p>
<p th:text="${user.age > 18}"></p>
<p th:text="${user.age >= 18}"></p>
<p th:text="${user.age == 18}"></p>
<p th:text="${user.age != 18}"></p>

条件运算

三元运算符: (if) ? (then) : (else)

<p th:text="${user.online ? '在线' : '离线'}"></p>
<p th:text="${user.online ? (user.vip ? 'VIP用户在线' : '普通用户在线') : '离线'}"></p>

二元运算符: (value) ?: (defaultValue) 其中 value 非空(null)即真 条件为真时输出 value 否则输出 defaultValue

假设 token = null user.email = fanlychie@gmail.com

<!-- 你还没有登录<span class="fuhao">,</span>请先登录 -->
<p th:text="${token} ?: '你还没有登录<span class="fuhao">,</span>请先登录'"></p>
<!-- fanlychie@gmail.com -->
<p th:text="${user.email} ?: '你还没有绑定邮箱'"></p>

无操作符

当模板运行在服务器端时 无论如何 Thymeleaf 都会用 th:* 属性的具体值替换标签体的内容

无操作符( _ )则允许使用原型标签体的内容作为默认值:

<!-- 你还没有登录<span class="fuhao">,</span>请先登录 -->
<p th:text="${token} ?: _">你还没有登录<span class="fuhao">,</span>请先登录</p>

使用文本

了解了标准表达式的语法之后 接下来介绍如何正确的使用它们

标准表达式通常需要搭配 th:* 属性来使用 这样 Thymeleaf 引擎才能正确的解析出表达式的结果

首先介绍两个最基础的 th:* 属性 它们分别是: th:textth:utext 这两个属性都是用于处理文本内容

th:text

在标签体中显示表达式的值的文本内容:

<span th:text="${message}"></span>

使用外部化的文本内容:

<span th:text="${message}">Welcome to BeiJing!</span>

当它作为静态文件直接运行时 浏览器会自动忽略它不能识别的 th:text 属性 而显示 <span> 标签体的文本内容 Welcome to BeiJing!

当它作为模板文件运行在服务器端时 th:text 属性的具体值将会替换 <span> 标签体的文本内容

th:utext

th:utextth:text 的区别在于:

  • th:text 默认会对含有 HTML 标签的内容进行字符转义;
  • th:utext (Unescaped Text)则不会对含有 HTML 标签的内容进行字符转义;

假设: message = "<b>Welcome to BeiJing!</b>"

th:text 栗子:

<span th:text="${message}"></span>

th:text 效果:

<b>Welcome to BeiJing!</b>

th:utext 栗子:

<span th:utext="${message}"></span>

th:utext 效果:

Welcome to BeiJing!

设置属性值

在 Thymeleaf 模板文件中 你可以使用 th:* (或者使用 th:attr 属性)来设置任意的 HTML5 标签属性的值 不仅如此 你还可以 th:*-* 来同时为多个不同的标签属性设置相同的一个值 甚至你可以使用 th:attrappendth:attrprepend 来追加新的值到现有的标签属性值中

th:attr

这种方式是不推荐的 了解一下就好 下面是用 th:attr="href=..." 来设置标签 href 属性的值:

<a th:attr="href=@{https://www.google.com.hk}">谷歌一下你能知道的更多</a>

th:*

上面 th:attr="href=@{http://www.baidu.com}" 语法显得臃肿甚至不简洁 我们更推荐下面的这种语法:

<a th:href="@{https://www.google.com.hk}">谷歌一下你能知道的更多</a>

这样代码就简洁多了 其中 th:* 中的 * 可以是 HTML5 支持的任意属性名称 甚至这些属性名称可以是自定义的:

<!-- <div item-id="1001">Welcome to BeiJing!</div> -->
<div th:item-id="${user.id}">Welcome to BeiJing!</div>

th:*-*

如果想要同时为标签的多个不同属性设置相同的一个值 可以使用 th:*-* 的语法:

<img src="logo.png" th:alt-title="LOGO图片">

它相当于:

<img src="logo.png" th:alt="LOGO图片" th:title="LOGO图片">

th:attrappend & th:attrprepend

th:attrappendth:attrprepend 可以将表达式的结果分别追加到指定的属性值之后和之前

<!-- <button class="btn enable">购买</button> -->
<button class="btn" th:attrappend="class=${outOfStock} ? ' enable' : ' disable'">购买</button>
<!-- <button class="enable btn">购买</button> -->
<button class="btn" th:attrprepend="class=${outOfStock} ? 'enable ' : 'disable '">购买</button>

另外 Thymeleaf 还提供了两个常用的具体附加属性 th:classappend="..."th:styleappend=""

它们分别用来代替 th:attrappend="class=..."th:attrappend="style=..."

<!-- <button class="btn enable">购买</button> -->
<button class="btn" th:classappend="${outOfStock} ? ' enable' : ' disable'">购买</button>

布尔属性

在 HTML 中有些属性是布尔属性 布尔属性是指没有值的属性 readonly checked selected 它们若存在那就意味着值为 true

<input type="checkbox" name="rememberme" checked /> 记住我
<input type="radio" name="sex" value="male" checked> 男
<input type="radio" name="sex" value="female"> 女
<input type="text" name="appId" value="J123654" readonly>
<select>
 <option selected>北京</option>
 <option>上海</option>
 <option>广州</option>
 <option>深圳</option>
</select>

Thymeleaf 也允许我们通过 th:* (这里的 * 表示任意的布尔属性) 来选择是否使用这些布尔属性

<input type="checkbox" name="rememberme" ch:checked="${rememberme}" /> 记住我

正如你所见 如果表达式的结果为 true 则自动勾选复选框 若为 false 则不会自动勾选

遍历

遍历(迭代)的语法 th:each="自定义的元素变量名称 : ${集合变量名称}"

<div>
 <spn>你所在城市:</spn>
 <select name="mycity">
 <option th:each="city : ${cities}" th:text="${city.name}"></option>
 </select>
</div>

th:each 提供了一个用于跟踪迭代的状态变量 它包含以下几个属性:

属性 类型 描述
index int 当前迭代的索引 从 0 开始
count int 当前迭代的计数 从 1 开始
size int 集合中元素的总个数
current int 当前的元素对象
even boolean 当前迭代的计数是否是偶数
odd boolean 当前迭代的计数是否是奇数
first boolean 当前元素是否是集合的第一个元素
last boolean 当前元素是否是集合的最后一个元素

状态变量的使用语法: th:each="自定义的元素变量名称, 自定义的状态变量名称 : ${集合变量名称}"

<div>
 <spn>所在城市:</spn>
 <select name="mycity">
 <option th:each="city, status : ${cities}" th:text="${city.name}" th:item-index="${status.count}"></option>
 </select>
</div>

不管什么时候 Thymeleaf 始终会为每个 th:each 创建一个状态变量 默认的状态变量名称就是自定义的元素变量名称后面加 Stat 字符串组成:

<div>
 <spn>所在城市:</spn>
 <select name="mycity">
 <option th:each="city : ${cities}" th:text="${city.name}" th:item-index="${cityStat.count}"></option>
 </select>
</div>

条件判断

条件判断语句有三种 分别是: th:if th:unless th:swith

th:if

当表达式的评估结果为真时则显示内容 否则不显示:

<a th:href="@{/user/order(uid=${user.id})}" th:if="${user != null}">我的订单</a>

真假评估的依据:

  • 当表达式的值不为空(null)时
    • 如果表达式的值是一个布尔类型 且值为 true 评估为真 否则为假;
    • 如果表达式的值是一个数字类型 且值为非 0 评估为真 否则为假;
    • 如果表达式的值是一个字符类型 且值为非 0 评估为真 否则为假;
    • 如果表达式的值是一个字符串类型 且值为非 "false" "off" "no" 评估为真 否则为假;
    • 如果表达式的值不是一个 布尔 数字 字符字符串 评估为真;
  • 当表达式的值为空(null)时 评估结果为假

因此 上面代码我们也可以简写成:

<a th:href="@{/user/order(uid=${user.id})}" th:if="${user}">我的订单</a>

但是 为了代码的可读性 我们并不建议这样使用

th:unless

th:unlessth:if 判断恰好相反 当表达式的评估结果为假时则显示内容 否则不显示:

<a th:href="@{/user/order(uid=${user.id})}" th:unless="${user == null}">我的订单</a>

th:swith

多路选择语句 它需要搭配 th:case 来使用:

<div th:switch="${user.role}">
 <p th:case="admin">管理员</p>
 <p th:case="user">普通用户</p>
</div>

模板布局

在 WEB 应用开发中 我们通常会将一些公共的代码片段如页眉 页脚 菜单等抽取出来放到一个或多个独立的文件里面 其他模板文件可以通过标签轻松的将这些代码片段引用进来 从而实现代码的复用性

在 Thymeleaf 中 你可以使用 th:fragment 来定义一个公共的代码片段 然后通过使用 th:insert th:replace th:include (Thymeleaf 3.0 开始不再推荐使用 本文也将不再介绍它)属性可以实现将定义的公共代码片段引用到模板文件中

th:fragment

我们可以通过 th:fragment 来定义一段公用的代码片段:

templates/footer.html

<div th:fragment="base">© 2017 fanlychie</div>

th:insert

templates/welcome.html 文件中引用 footer.htmlbase 代码片段的方式为:

<div th:insert="~{footer :: base}"></div>

其中 ~{} 是可选的 我们可以去掉这层的包裹:

<div th:insert="footer :: base"></div>

如果 footer.htmlwelcome.html 不在同级目录 templates/commons/footer.html

<div th:insert="@{commons/footer} :: base"></div>

类选择器 ID选择器等

除了可以使用 th:fragment 来定义一段公用的代码片段外 我们也可以使用类选择器 ID选择器等:

templates/footer.html

<div id="base">© 2017 fanlychie</div>

templates/welcome.html 文件中引用 footer.htmlid="base" 片段的方式为:

<div th:insert="footer :: #base"></div>

th:replace

th:insert 相似的 th:replace 也可以用来引用公共的代码片段

不同的是 th:insert 是直接将代码片段插入到标签体内 th:replace 则是用代码片段直接替换标签体内容

举个栗子:

<!-- <div><div id="base">© 2017 fanlychie</div></div> -->
<div th:insert="footer :: base"></div>
<!-- <div id="base">© 2017 fanlychie</div> -->
<div th:replace="footer :: base"></div>

th:fragment 参数使用

使用 th:fragment 来定义一个代码片段时 它允许你指定一组参数 语法: th:fragment="fragmentname(arg1, arg2, ...)"

<div th:fragment="crumbs(parent, child)">
 <span th:text="|${parent} > ${child}|"></span>
</div>
<!-- 用户中心 > 我的订单 -->
<div th:replace="::crumbs('用户中心', '我的订单')"></div>

th:assert

断言 它可以同时指定多个表达式 每个表达式的结果评估值必须为 true 否则它将会抛出一个异常 语法: th:assert="expression1, expression2..."

<div th:replace="::crumbs(${parentMenuName}, ${childMenuName})" th:assert="${!#strings.isEmpty(parentMenuName), !#strings.isEmpty(childMenuName)}"></div>

定义局部变量

使用 th:with 属性可以定义局部变量:

<p th:with="name='fanlychie'">
 <span th:text="${name}"></span>
</p>

同时定义多个局部变量时 用英文 , 号分隔开:

<p th:with="name=${user.name},age={user.age}">
 ......
</p>

注释

下面介绍常见的两种注释:

标准注释

语法: <!-- ... ---> 注释的代码块会在文件源代码中显示出来

单行注释

<!-- <span>${message}</span> --->

多行注释

<!--
<div th:switch="${user.role}">
 <p th:case="admin">管理员</p>
 <p th:case="user">普通用户</p>
</div>
--->

解析器级注释

语法: <!--/* ... */--> 注释的代码块会在引擎解析的时候抹去

单行注释:

<!--/* <span>${message}</span> */-->

多行注释

<!--/*-->
<div th:switch="${user.role}">
 <p th:case="admin">管理员</p>
 <p th:case="user">普通用户</p>
</div>
<!--*/-->

内联表达式

内联表达式允许我们直接在 HTML 文本中使用标准表达式 而不需要使用 th:* 标签属性

[[…]]

[[]] 相当于 th:text 对含有 HTML 标签的内容自动进行字符转义

htmlContent = "<b>Welcome to BeiJing!</b>"

<p>The message is : [[${htmlContent}]]</p>

输出:

The message is : <b>Welcome to BeiJing!</b>

[(…)]

[()] 相当于 th:utext 对含有 HTML 标签的内容不进行字符转义

<p>The message is : [(${htmlContent})]</p>

输出:

The message is : Welcome to BeiJing!

th:inline

我们已经了解到 使用 [[]][()] 语法可以直接在 HTML 文本中使用标准表达式 如果想要使用更多高级的功能 需要使用 th:inline 属性来激活 它的取值如下:

描述
none 禁止内联表达式 如果需要输出 [[]][()] 字符串
text 文本内联 可以使用 th:each 等高级语法
css 样式内联 如: <style th:inline="css">
javascript 脚本内联 如: <style th:inline="javascript">

none

<!-- [[1, 2], [3, 4]] -->
<p th:inline="none">[[1, 2], [3, 4]]</p>

text

<!-- 北京 上海 广州 深圳 -->
<p th:inline="text">
 [# th:each="city : ${cities}"]
 [(${city.name})]
 [/]
</p>

css

<style th:inline="css"> 
 body {
 background-color:[[${bgColor}]];
 }
</style>

javascript

<script th:inline="javascript"> 
 var user = [[${user}]];
 alert("用户名:" + user.name);
</script>

以上所述就是小编给大家介绍的《Thymeleaf 入门基础 | fanlychie》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

CSS权威指南(第三版·英文影印版)

CSS权威指南(第三版·英文影印版)

[美] Eric A.Meyer / 东南大学出版社 / 2007-06 / 68.00元

著名的CSS专家Eric A.Meyer他招牌式的智慧和无与伦比的经验引领读者探索了CSS的各个部 分,包括属性、标记、特性和实现。此外,他还就现实应用中的一些问题,例如浏览器的支持和设计方针,发表了看法。你所要知道的就是HTML 4.0的知识,这样就可以创建整洁、易于维护的脚本,以与桌面出版系统同样的优雅和控制能力管理网站布局和分页。你将会学到: 精妙地设计文本风格 用户界面、......一起来看看 《CSS权威指南(第三版·英文影印版)》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

MD5 加密
MD5 加密

MD5 加密工具