一、Thymeleaf简介
Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本。简单说,就是通过特定的语法对 html 的标记做渲染。
二、常规用法
1.标准表达式语法
简单表达式:
- 变量表达式:
${...}
- 链接URL表达式:
@{...}
算术运算
- 二元运算符:
+
,-
,*
,/
,%
- 减号(一元运算符):
-
布尔运算:
-
- 二元运算符:
and
,or 或者 &&,||
- 布尔否定(一元运算符):
!
,not
- 二元运算符:
比较和平等:
-
- 比较:
>
,<
,>=
,<=
(gt
,lt
,ge
,le
) - 等号运算符:
==
,!=
(eq
,ne
)
- 比较:
条件运算符:
- 如果-则:
(if) ? (then)
- 如果-则-否则:
(if) ? (then) : (else)
- 默认:
(value) ?: (defaultvalue)
三、常用
1)判空(null, ‘’)
判断对象、属性字段是不是null:
<input type="radio" name="isExist" value="1" checked="checked" th:disabled="${null != info && null != info.isExist && info.isExist != ''}"> 存在问题
判断是不是为空字符串: “”
<span th:if="${#strings.isEmpty(phoneNumber)}">是否为空串</span>
2)逻辑判断(&&,||)
<span th:if="${sex != 1 && age eq 4}">判断是否相等,且比较大小</span>
3)禁用操作(th:disabled)
<input type="text" th:disabled="${userName != null && userName != ''}" >
4)select下拉选择项(遍历、迭代)
<select class="form-control k_selectpicker" name="progress" > <option th:each="iterator,progressState : ${T(com.momoj.model.enums.productEnum).values()}" th:value="${iterator.code}" th:text="${iterator.desc}"
th:selected="${product.type eq iterator.code}"> </option> </select>
5)自定义属性(th:data-type)
<input type="text" id="type" th:data-type="1" />
js可以通过 $('#type').data('type')来获取值。
6)遍历switch:开关语句(switch/case)
<td th:switch="${user.sex}"> <span th:case="0"> 女孩 </span> <span th:case="1"> 男生 </span> </td>
获取到sex的值,通过switch语法来判断case为0或者1,从而展示匹配到的那个span。 例如: <td th:switch="${whetherOverdue}"> <span th:case="0"> 未超期 </span> <span th:case="1"> 已超期 </span> </td>
7)时间格式化操作(#data.format(createTime, ‘yyyy-MM-dd HH:mm’))
<td>创建时间:</td> <td th:text="${#dates.format(createTime, 'yyyy-MM-dd HH:mm')}"></td>
8)包含(contain方法)
*字符串包含 ${#strings.contains(name,'ez')} *数组包含 ${#arrays.contains(array, element)} *集合包含 ${#lists.contains(list, element)} *map类型包含 ${#maps.containsKey(map, key)}
9)内外链接符号(+)
<td th:title="${task.taskName} + '-链接符号附加内容'" th:text="${task.taskName + '-链接符号附加内容' }"></td>
10)设置标签自定义值(th:atrr)
<td th:attr="data-content=${description}" id="content">执行人员:</td>
其,获取值得方式如下: var content = $("#content").attr("data-content");
或者
var content = $("#content").data("data-content");