Thymeleaf常用写法,带实例,最全!

Thymeleaf:
市面上主流的 Java 模板引擎有:JSP、Velocity、Freemarker、Thymeleaf
JSP本质也是模板引擎,Spring Boot 官方推荐使用 “Thymeleaf”模板引擎

Thymeleaf 官网:https://www.thymeleaf.org/
Thymeleaf 在Github 的主页:https://github.com/thymeleaf/thymeleaf
Thymeleaf 参考手册:https://blog.csdn.net/zrk1000/article/details/72667478/

1.th

<a th:href="@{/admin/examination/paper/initAdd}"></a>

th:href@{} : 链接

<a th:href="@{/web/uc/order/orderInfo?orderId={orderId}(orderId=${order['id']})}" class="c-999">详情</a>

th:href@{}:带参数

<script type="text/javascript" 	th:src="@{{path}/admin/libs/plugins/layer/laydate/laydate.js?v={v}(path=${staticPath},v=${v})}">
</script>
<script type="text/javascript" th:src="@{/course/cou/select-common-course.js?v={v}(v=${v})}">
</script>     

th:src@{} :引入js、css图片等等

<script th:inline="javascript"> </script>

th:inline=“javascript” :页面写js使用 (脚本内联)
th:inline=“text” : (文本内联)

<input hidden id="id" name="id" th:value="${examPaper['id']}" 	th:placeholder="XXX" />

th:value: value值
th:placeholder :描述

<span th:if="${useType}==1" class="fs14 c-999">试卷</span>

th:if : 判断

<input name="stick" type="radio" value="2" 	th:checked="${examPaper['stick']} == 2" /> <strong>是</strong>

th:checked : checked选中

<span class="fs24 c-master" th:text="${statistics['count']}"></span>

th:text : 文本,普通字符串

<textarea th:disabled="${personalTask['marked']}==2?  'true':'false'"
	th:attr="data-record=${personalTask['questionRecordMap'][question.id+'']['id']}" class=""
	th:utext="${personalTask['questionRecordMap'][question.id+'']['comment']}">
</textarea>

th:attr : 属性
th:utex : 转义文本

<tr th:if="!${#lists.isEmpty(examPaper['classesList'])}" 
	th:each="classes,index : ${examPaper['classesList']}" 	th:attr="data-classes=${classes['id']}">
	<td class="text-center" th:text="${classes['id']}"></td>
</tr>

th:each : 循环
index.index:下标
index.count:数量

<li th:if="${paper['status']} == 0" th:attrprepend="data-id=${paper['id']}" class="publish"></li>

th:attrprepend : attr + 拼接的属性

<li data-type="VIDEO" th:classappend="${courseTypeKey}=='VIDEO'?'active':''"  class="cm-filter-item">录播课</li>

th:classappend : class + 拼接的属性

<img class="wm-img" th:src="${details['shop']['book']['imageMap']['mobileUrlMap']['large']}" th:alt="${details['shop']['book']['bookName']}"/>

th:src : 引入图片路径
th:alt : alt显示文字

2.map

<select th:disabled="${examPaper['status']} != 0 or !${#maps.isEmpty(classes)}" class="form-control" id="select">
</select>

th:disabled : xx条件下不显示

${#maps.isEmpty()} : map为空

!${#maps.isEmpty()} : map不为空

3.list

<tr th:class="${#lists.isEmpty(examPaper['courseList'])} ? '':'hide'"></tr>
<span th:if="!${#lists.isEmpty(course['teacherList'])} and ${#lists.size(course['teacherList'])}>4" ></span>

th:class class样式

${#lists.isEmpty()} list为空

!${#lists.isEmpty()} list不为空

${#lists.size()} list长度

4.string

<section th:if="${#strings.isEmpty(course['details'])}"class="no-data__wrap">
</section>

<span class="fs18" th:text="${#strings.concat('班级名称:', classes['name'])}"></span>

<samp th:text="${#strings.substring(details['createTime'],0,16)}"></samp>

${#strings.isEmpty()} string为空

${#strings.concat(‘’,’’) 拼接

${#strings.contains()} : 包含某字符

${#strings.substring(‘’, ,) string截取字符串

5.date

<div class="pull-right">&copy;<span th:text="'2010-'+${#dates.format(new java.util.Date().getTime(), 'yyyy')}"></span></div>

${#dates.format(‘’,’’)} 格式化date

<span th:text="${#dates.format(taskExamPaperEndTime, 'yyyy-MM-dd HH:mm:ss')}"></span>

格式化日期为:yyyy-MM-dd HH:mm:ss 格式

6.number

<li th:each="ye : ${#numbers.sequence(2016,year)}" th:attrappend="data-year=${ye}" th:text="${ye}" class="cm-filter-item"></li>

${#numbers.sequence()} 列举时间

<span th:text="${#numbers.formatDecimal(viewParsMap['entity']['userId'],1,0)}"></span>

#numbers.formatDecimal(,) : 将userId转int类型,截取掉小数点后的小数。

<td class="text-center" th:text="${#numbers.formatDecimal(record['examTime']/60,1,0,'POINT')}+'分'+${record['examTime']}%60 +'秒'"></td>

将秒格式化转为分+秒

7.其他

<div data-th-replace="common/functionDepict"></div>

data-th-replace 引入其他模板

<th:block th:if="${useType}==2 and ${#maps.isEmpty(classes)}"></th:block>

< th:block></th:block> xxx条件下显示

<input type="hidden" th:attr="id='questionCount_'+${personalTask['id']}" th:value="${personalTask['questionCount']}"/>

动态id

th:data-id="${examQuestionRecord['id']}+'-'+${subIndex.count}"

唯一动态id

th:attr="data-id=${personalTask['examPaper']['id']},data-time=${#strings.substring(personalTask['examPaper']['endTime'],0,16)},data-url=${personalTask['examPaper']['datumList'][0]['url']}"

th:attr”,” 可以定义多个data-属性

${#strings.replace(#strings.substring(dataMap['openTime'],5,16),'-','月')}

格式化yyyy-MM-dd HH:mm:ss 为 xx月xx HH:mm

发布了114 篇原创文章 · 获赞 52 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/Smile_Sunny521/article/details/97670759
今日推荐