目录
标准变量表达式
1.语法${…}
th:text="…"是Thymeleaf的一个属性，用于文本的显示
th:text="${. . .}"
例：
<h1 th:text="${user.getId()}"></h1>
<h1 th:text="${user.getUsername()}"></h1>
<h1 th:text="${user.getAge()}"></h1>
<h1 th:text="${user.username}"></h1>
<h1 th:text="${user.getAge()}"></h1>
2.URL表达式 @{. . .} th:href="@{…}"
绝对路径（不带参数）
<a th:href="@{http://localhost:8080/user/detail}">跳转至：/user/detail</a><br/>
绝对路径（带参数）
<a th:href="@{http://localhost:8080/test?username='zhangsan'}">路径表达式的写法</a><br/>
相对路径（不带参数）
<a th:href="@{/user/detail}">跳转至：/user/detail</a>
相对路径（带参数）
<a th:href="@{'/test?username='+${id}}">相对路径：获取后台参数值</a><br/>
<h2>相对路径（带多个参数：后台获取的参数）</h2>
<a th:href="@{'/test1?username='+${username}+'&id='+${id}+'&age='+${age}}">相对路径：获取后台参数值</a><br/>
<a th:href="@{/test1(id=${id},username=${username},age=${age})}">（强烈推荐）@{}相对路径（带多个参数：后台获取的参数值）</a>
3.循环
3.1遍历列表list th:each
<div style="color: red">
1.user:当前对象的变量名（随意）<br/>
2.userStat:当前对象的状态变量名（可选，默认就是对象变量名称+Stat）<br/>
3.${userList}:循环遍历的集合<br/>
4.变量名自定义
</div>
<div th:each="user,userStat:${userList}">
<span th:text="${userStat.index}"></span>
<span th:text="${userStat.count}"></span>
<span th:text="${user.id}"></span>
<span th:text="${user.nick}"></span>
<span th:text="${user.phone}"></span>
<span th:text="${user.address}"></span>
</div>
3.2遍历Map
Controller
@RequestMapping(value = "/each/map")
public String eachMap(Model model) {
Map<Integer,Object> userMaps = new HashMap<Integer, Object>();
for (int i = 0; i < 10; i++) {
User user = new User();
user.setId(i);
user.setNick("李四"+i);
user.setPhone("1390000000"+i);
user.setAddress("天津市"+i);
userMaps.put(i,user);
}
model.addAttribute("userMaps",userMaps);
return "eachMap";
}
html
<div th:each="userMap,userMapStat:${userMaps}">
<span th:text="${userMapStat.count}"></span>
<span th:text="${userMapStat.index}"></span>
<span th:text="${userMap.key}"></span>
<span th:text="${userMap.value}"></span>
<span th:text="${userMap.value.id}"></span>
<span th:text="${userMap.value.nick}"></span>
<span th:text="${userMap.value.phone}"></span>
<span th:text="${userMap.value.address}"></span>
</div>
4.判断 th:if th:unless th:switch th:case
@RequestMapping("/condition")
public String condition(Model model){
model.addAttribute("sex",1);
model.addAttribute("flag",true);
model.addAttribute("productType",0);
return "condition";
}
<h1>th:if 用法：如果满足条件显示（执行）否则相反</h1>
<div th:if="${sex eq 1}">
男
</div>
<div th:if="${sex eq 0}">
女
</div>
<h1>th:unless 用法：与th：if用法取反</h1>
<div th:unless="${sex ne 1}">
女
</div>
<h1>th:switch/th:case用法</h1>
<div th:switch="${productType}">
<span th:case="0">产品0</span>
<span th:case="1">产品1</span>
<span th:case="*">无此产品</span>
</div>
5.内敛表达式
@RequestMapping("/inline")
public String inline(Model model){
model.addAttribute("data","SpringBoot inline");
return "inline-test";
}
5.1 th:incline=“text” 取数据：[[${…}]]
<body th:inline="text">
<div th:text="${data}"></div>
<h2 th:text="${data}">xxxx</h2>
<h1>内敛文本： th:inline="text"</h1>
<div th:inline="text">
数据：[[${data}]] （只在div里才能生效）
</div>
数据outside：[[${data}]]
5.2 内敛脚本 th:incline="javascript
<h1>内敛脚本： th:inline="javascript"</h1>
<script type="text/javascript" th:inline="javascript">
function showData(){
alert([[${data}]]);
alert("22222")
}
</script>
<button th:onclick="showData()">展示数据</button>
字符串拼接
使用前
<div>共120条12页，当前第1页 首页 上一页 下一页 尾页</div>
<div>共<span th:text="${totalRows}"></span>条<span th:text="${totalPage}"/>页，当前第<span th:text="${currentPage}"/> 页 首页 上一页 下一页 尾页</div>
<span th:text="'共'+${totalRows}+'条'+${totalPage}+'页,当前第'+${currentPage}+'页 首页 上一页 下一页 尾页'"+>共120条12页，当前第1页 首页 上一页 下一页 尾页</span>
使用后：
<h1>使用更优雅的方式来拼接字符串：|要拼接的字符串内容|</h1>
<div th:text="|共${totalRows}条${totalPage}页,当前第${currentPage}页 首页 上一页 下一页 尾页|"></div>
th:text和th:value
<!--data的值为springboot-->
<input type="text" th:text="显示在外面" th:value="${data}"/>
扫一扫
536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
