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

fengyehongWorld

已于 2022-07-04 09:30:12 修改

阅读量4.2k

点赞数 2

分类专栏： # Thymeleaf 文章标签： Thymeleaf

于 2022-07-04 09:29:19 首次发布

本文链接：https://blog.csdn.net/feyehong/article/details/125593292

版权

Thymeleaf 专栏收录该内容

22 篇文章 3 订阅

订阅专栏

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

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf th:classappend属性追加 th:styleappend样式追加 th:data-自定义属性

⏹Thymeleaf th:classappend属性追加 th:styleappend样式追加 th:data-自定义属性
复制链接

扫一扫