Thymeleaf笔记
2018-10-24 本文已影响0人
SithCait
简单使用
引入标签
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
标签的使用
$符号的使用
<td th:text="${users.email}"></td>
@符号的使用
<link th:href="@{/css/style.css}" rel="stylesheet" type="text/css"/>
<img th:src="@{/img/logo.png}">
each标签的使用
<div class="goodsItem" th:each="goods,goodsStat : ${goodsList}">
<a th:href="@{'/goodDetail/'+${goods.id}}">
<img th:src="${goods.picUrl}" th:alt="${goods.goodsName}" class="goodsimg">
</a><br/>
<p class="f1">
<a th:href="@{'/goodDetail/'+${goods.id}}" th:text="${goods.goodsName}"></a>
</p>
<div class="f1" > ￥ <a th:text="${goods.price}"></a> 元 </div>
</div>
goodsStat 称作状态变量，属性有：
index:当前迭代对象的index（从0开始计算）
count: 当前迭代对象的index(从1开始计算)
size:被迭代对象的大小
current:当前迭代变量
even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
first:布尔值，当前循环是否是第一个
last:布尔值，当前循环是否是最后一个
*符号的使用
用一个预先选择的对象来代替上下文变量容器(map)来执行
<div class="goodsItem" th:each="goods,goodsStat : ${goodsList}">
<div class="f1" > ￥ <a th:text="*{price}"></a> 元 </div>
<div th:object="${book}">
...
<span th:text="*{title}">...</span>
...
</div>
if与unless标签的使用
<a href="#" th:if="${goods.type} == 0" th:class="searchSelected">大师咖啡</a>
<a href="#" th:unless="${goods.type} == 0" >大师咖啡</a>
多元运算符的使用
<a href="#" th:class=" @{(${goods.type} ==0 ? 'searchSelected' : '')}>大师咖啡</a>
<a href="#" th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''">大师咖啡</a>
日期的格式化
<td th:text="${#dates.format(good.createDate,'yyyy-MM-dd HH:mm:ss')}"></td>
标签内函数传参
<a class="red" th:onclick="'goodDelete(\''+${good.id}+'\')'">
引入模块
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="copy">
<div id="footer">
<div class="text">
© 20018-2020 SithCait 版权所有，并保留所有权利。<br/>
</div>
</div>
</div>
</html>
<div th:include="common/footer :: copy"></div>
JS中的内联文本
var username = [[${sesion.user.name}]];
var size = [[${size}]];
取整保留小数
<p>formatDecimal 整数部分随意，小数点后保留两位，四舍五入: <span th:text="${#numbers.formatDecimal(itdragonNum, 0, 2)}"/></p>
<p>formatDecimal 整数部分保留五位数，小数点后保留两位，四舍五入: <span th:text="${#numbers.formatDecimal(itdragonNum, 5, 2)}"/></p>
JS中保留两位小数
//保留两位小数
function twoDecimal(a) {
var b = parseFloat(a).toFixed(3);
var c = b.substring(0,b.toString().length - 1);
return c;
}
switch和case的使用
<td align="center" th:switch="${order.status}">
<a th:case="'0'">待支付</a>
<a th:case="'1'">已支付</a>
<a th:case="'2'">未发货</a>
<a th:case="'3'">已发货</a>
<a th:case="'4'">确认收货</a>
<a th:case="'5'">已取消</a>
</td>
