1 怎么使用
前端html页面标签中引入如下:
<html xmlns:th="http://www.thymeleaf.org">
2 表达式
- 简单表达式
- 可用值表达式(后台设置):
${…}
- 所有可用值表达式:
*{…}
比如*{name} 从可用值中查找name,如果有上下文,比如上层是object,则查object中的name属性。
- 可用值表达式(后台设置):
- 消息表达式:
#{…}
国际化时使用,也可以使用内置的对象,比如date格式化数据
- 链接表达式:
@{…}
用来配合link src href
使用的语法 - 片段表达式:
~{…}
用来引入公共部分代码片段,并进行传值操作使用的语法。 - 文字
- 文本:
'one text', 'another text', …
- 数字:
1,2,1.2,…
- 布尔:
true, false
- 空值:
null
- 单词:
something, main, name, …
- 文本:
- 文本操作
- 链接:
+
- 替换:
|The name is ${name}|
- 链接:
<a href="" th:href="@{|/name/${test.size()}|}">链接地址:</a>
//渲染后的结果
<a href="/name/3">链接地址:</a>
- 数学操作
- 二元操作:
+, - , * , / , %
- 一元操作:
- (负)
- 二元操作:
- 布尔操作
- 一元 :
and, or
- 二元 :
!, not
- 一元 :
- 比较
- 比较:
> , < , >= , <= ( gt , lt , ge , le )
- 等于:
== , != ( eq , ne )
- 比较:
- 条件
- If-then:
(if) ? (then)
- If-then-else:
(if) ? (then) : (else)
- Default:
(value) ?: (defaultvalue)
- If-then:
- 无操作
- 使用
_
来禁止转义。
- 使用
3 支持的操作
- html5的操作支持:
th:abbr
th:accept
th:accept-charset
th:accesskey
th:action
th:align
th:alt
th:archive
th:audio
th:autocomplete
th:axis
th:background
th:bgcolor
th:border
th:cellpadding
th:cellspacing
th:challenge
th:charset
th:cite
th:class
th:classid
th:codebase
th:codetype
th:cols
th:colspan
th:compact
th:content
th:contenteditable
th:contextmenu
th:data
th:datetime
th:dir
th:draggable
th:dropzone
th:enctype
th:for
th:form
th:formaction
th:formenctype
th:formmethod
th:formtarget
th:fragment
th:frame
th:frameborder
th:headers
th:height
th:high
th:href
th:hreflang
th:hspace
th:http-equiv
th:icon
th:id
th:inline
th:keytype
th:kind
th:label
th:lang
th:list
th:longdesc
th:low
th:manifest
th:marginheight
th:marginwidth
th:max
th:maxlength
th:media
th:method
th:min
th:name
th:onabort
th:onafterprint
th:onbeforeprint
th:onbeforeunload
th:onblur
th:oncanplay
th:oncanplaythrough
th:onchange
th:onclick
th:oncontextmenu
th:ondblclick
th:ondrag
th:ondragend
th:ondragenter
th:ondragleave
th:ondragover
th:ondragstart
th:ondrop
th:ondurationchange
th:onemptied
th:onended
th:onerror
th:onfocus
th:onformchange
th:onforminput
th:onhashchange
th:oninput
th:oninvalid
th:onkeydown
th:onkeypress
th:onkeyup
th:onload
th:onloadeddata
th:onloadedmetadata
th:onloadstart
th:onmessage
th:onmousedown
th:onmousemove
th:onmouseout
th:onmouseover
th:onmouseup
th:onmousewheel
th:onoffline
th:ononline
th:onpause
th:onplay
th:onplaying
th:onpopstate
th:onprogress
th:onratechange
th:onreadystatechange
th:onredo
th:onreset
th:onresize
th:onscroll
th:onseeked
th:onseeking
th:onselect
th:onshow
th:onstalled
th:onstorage
th:onsubmit
th:onsuspend
th:ontimeupdate
th:onundo
th:onunload
th:onvolumechange
th:onwaiting
th:optimum
th:pattern
th:placeholder
th:poster
th:preload
th:radiogroup
th:rel
th:rev
th:rows
th:rowspan
th:rules
th:sandbox
th:scheme
th:scope
th:scrolling
th:size
th:sizes
th:span
th:spellcheck
th:src
th:srclang
th:standby
th:start
th:step
th:style
th:summary
th:tabindex
th:target
th:title
th:type
th:usemap
th:value
th:valuetype
th:vspace
th:width
th:wrap
th:vspace
th:width
th:wrap
th:xmlbase
th:xmllang
th:xmlspace
- 布尔类型
th:async
th:autofocus
th:autoplay
th:checked
th:controls
th:declare
th:default
th:defer
th:disabled
th:formnovalidate
th:hidden
th:ismap
th:loop
th:multiple
th:novalidate
th:nowrap
th:open
th:pubdate
th:readonly
th:required
th:reversed
th:scoped
th:seamless
th:selected
3.1 常用th标签
关键字 | 功能介绍 | 案例 |
---|---|---|
th:value | thymeleaf格式化时间 |
|
th:id | 替换id |
|
th:text | 文本替换 |
|
th:utext | 支持html的文本替换 |
|
th:object | 替换对象 |
|
th:value | 属性赋值 |
|
th:with | 变量赋值运算 |
|
th:style | 设置样式 |
|
th:onclick | 点击事件 |
|
th:each | 属性赋值 |
|
th:if | 判断条件 |
|
th:unless | 和th:if判断相反 |
|
th:href | 链接地址 |
|
th:switch | 多路选择配合th:case使用 |
|
th:fragment | th:switch的一个分支 |
|
th:includ | 布局标签,替换内容到引入的文件 |
|
th:replace | 布局标签,替换整个标签到引入的文件 |
|
th:selectd | selected选择框选中 |
|
th:src | 图片类地址引入 |
|
th:inline | 定义js脚本可以使用变量 |
|
th:action | 表单提交的地址 |
|
th:remove | 删除某个属性 |
|
th:attr | 设置标签属性,多个属性可以用逗号分隔 |
|
4 判断操作
thymeleaf提供了几种判断,if、switch
- 后台数据
public class TestVo {
private String name;
private Integer Score;
private Integer male;
private Date birthday;
public TestVo(String name, Integer score, Date birthday, Integer male) {
this.name = name;
Score = score;
this.male = male;
this.birthday = birthday;
}
@RequestMapping("/test01")
public String thymeleaf(ModelMap map){
List<TestVo> testVos=new ArrayList<>();
testVos.add(new TestVo("数学",10,new Date(),1));
testVos.add(new TestVo("数学0001",70,new Date(),2));
testVos.add(new TestVo("数学01",100,new Date(),3));
map.put("test",testVos);
return "/back/import/test";
}
- 前端语法
<table>
<thead>
<th></th>
</thead>
<tbody>
<tr th:each="test:${test}">
<!--判断成绩-->
<td th:if="${test.Score} gt 0 and ${test.Score} lt 60">差</td>
<td th:if="${test.Score} ge 60 and ${test.Score} le 70">中</td>
<td th:if="${test.Score} gt 70 and ${test.Score} le 80">良</td>
<td th:if="${test.Score} gt 80 and ${test.Score} le 90">优</td>
<td th:if="${test.Score} gt 90 and ${test.Score} le 100">超级优秀</td>
</tr>
<br>
<tr th:each="test:${test}">
<!--判断成绩 一般只有两种情况的时候可以使用这种方式-->
<td th:if="${test.Score} gt 0 and ${test.Score} lt 60">差</td>
<!--除了这些条件之外的-->
<td th:unless="${test.Score} gt 0 and ${test.Score} lt 60">及格</td>
</tr>
<tr th:each="test:${test}">
<td th:switch="${test.male}">
<span th:case="1">男</span>
<span th:case="2">女</span>
<!--其他情况-->
<span th:case="*">未知</span>
</td>
</tr>
</tbody>
</table>
5 模板操作
主要引入公共头部和底部相关代码使用 ,当然也可以其他地方使用
- 底部模板代码
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<body>
<div th:fragment="footer">
</div>
</body>
</html>
- Springboot整合引入模块
<!--写入绝对路径即可引入 -->
<div th:include="/back/import/footer :: footer"></div>
6 文本和带格式文本
用来输入内容到标签内部,而不是attr中。分为th:text和th:utext两种,后者可以渲染文本中的标签。
map.put("msgutext","<b>1111</b>");
<div th:utext="${msgutext}"></div>
<div th:text="${msgutext}"></div>
7 外围包裹–block
有时候需要在代码外部加层条件,但写div之类的又影响样式,此情况下你可以用下面这种方式:
<th:block th:with="score=${test.Score}">
<td th:if="${score} ge 60">及格啦</td>
</th:block>
8 循环
遍历元素
<tr th:each="test:${test}">
<td th:text="${test.Score}"></td>
</tr>
9 循环下标判断
List<String> list=new ArrayList<String>();
list.add("1s");
list.add("2s");
list.add("3s");
map.put("list",list);
<th:block th:each="mylist,iterStat:${list}">
111
<span th:text="${mylist}"></span>
<th:block th:if="${iterStat.index le 1}">
<span th:text="${mylist}"></span>
</th:block>
</th:block>
10 常用操作
- 日期格式化
<td th:text="${#dates.format(content.createDate,'yyyy-MM-dd HH:mm:ss')}"></td>
- 字符截取长度
<td th:if="${#strings.length(content.title) gt 5 } "
th:text="${#strings.substring(content.title,0,5) + '…'}">
</td>
- 下拉选择
<select name="subId" id="subId" lay-verify="" >
<option value="">请选择</option>
<option th:each="channelsub:${subchannels}"
th:selected="${channelsub.id == subId}"
th:value="${channelsub.id}"
th:text="${channelsub.name}">
</option>
</select>
11 js取值
有时候需要传递参数到js中,按如下方式:
<script th:inline="javascript" >
var size= [[${test.size()}]];
console.info(size)
</script>
- 进阶
ps: 下面涉及到thymeleaf的语法出,可以替换成其他thymeleaf的语法来用
<script th:inline="javascript" >
//尺寸等于3时打印日志..
/*[# th:if="${test.size() eq 3}"]*/
console.info('Welcome admin');
/*[/]*/
</script>
12 css取值
首先需要后台设置classname、align的值,之后按如下方式:
<style th:inline="css">
.[[${classname}]] {
text-align: [[${align}]];
}
</style>
转载至 thymeleaf快速入门教程