当前位置：网站首页>Thymeleaf th:classappend属性追加 th:styleappend样式追加 th:data-自定义属性

Thymeleaf th:classappend属性追加 th:styleappend样式追加 th:data-自定义属性

2022-07-05 14:10:00 【fengyehongWorld】

目录

后台数据准备

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>

渲染后
在这里插入图片描述

原网站

版权声明
本文为[fengyehongWorld]所创，转载请带上原文链接，感谢
https://blog.csdn.net/feyehong/article/details/125593292

边栏推荐

猜你喜欢

随机推荐