⭕后台数据准备
public ZTestEntity init3() {
ZTestEntity zTestEntity = new ZTestEntity();
zTestEntity.setIsAdmin(true);
zTestEntity.setName("贾飞天");
return zTestEntity;
}
// ------------------------------------------------
@GetMapping("/init3")
public ModelAndView init3() {
ModelAndView modelAndView = new ModelAndView();
ZTestEntity entity = service.init3();
modelAndView.addObject("entity", entity);
modelAndView.setViewName("test3");
return modelAndView;
}
⭕前台
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<style>
.content {
color: red;
}
.preAttr {
margin-top: 10px;
}
.test3 {
border: 1px solid yellow;
}
</style>
<title>test3页面的标题</title>
</head>
<body>
<div id="container" th:object="${entity}">
<!--
// 省略......
-->
</div>
</body>
</html>
一. th:classappend
<!--
⏹当isAdmin为true时,追加test3属性;否则不执行任何操作
-->
<div class="content" th:classappend="*{isAdmin} ? test3 : _">th:classappend测试内容</div>
渲染后
二. th:styleappend
<!--
⏹当isAdmin为true时,追加 margin-top:50px 的样式;否则什么都不做
-->
<div style="color: pink;" th:styleappend="*{isAdmin} ? 'margin-top:50px' : _">th:styleappend测试内容</div>
渲染后
三. 自定义属性
<!--
⏹data- 自定义属性可以直接通过 th: 的形式来追加
-->
<div th:data-custom-name="*{name}">th:data-属性测试内容</div>
<!--
⏹th:任意属性名 的方式,可以添加任意属性
-->
<div th:haha="*{name}">th:任意属性测试内容</div>
<hr>
渲染后
四. data-th-属性名的写法
<!--
⏹data-th-属性名 和 th:属性名作用相同,只不过是写法不同
-->
<div data-th-class="*{name}">data-th-测试内容</div>
<div th:class="*{name}">th:class测试内容</div>
渲染后