当前位置:网站首页>Thymeleaf th:classappend attribute append th:styleappend style append th:data- custom attribute
Thymeleaf th:classappend attribute append th:styleappend style append th:data- custom attribute
2022-07-05 14:18:00 【fengyehongWorld】
Catalog
Background data preparation
public ZTestEntity init3() {
ZTestEntity zTestEntity = new ZTestEntity();
zTestEntity.setIsAdmin(true);
zTestEntity.setName(" Jia Feitian ");
return zTestEntity;
}
// ------------------------------------------------
@GetMapping("/init3")
public ModelAndView init3() {
ModelAndView modelAndView = new ModelAndView();
ZTestEntity entity = service.init3();
modelAndView.addObject("entity", entity);
modelAndView.setViewName("test3");
return modelAndView;
}
The front desk
<!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 of the page </title>
</head>
<body>
<div id="container" th:object="${entity}">
<!-- // Omit ...... -->
</div>
</body>
</html>
One . th:classappend
<!-- When isAdmin by true when , Additional test3 attribute ; Otherwise, nothing will be done -->
<div class="content" th:classappend="*{isAdmin} ? test3 : _">th:classappend Test content </div>
After rendering
Two . th:styleappend
<!-- When isAdmin by true when , Additional margin-top:50px The style of ; Otherwise, do nothing -->
<div style="color: pink;" th:styleappend="*{isAdmin} ? 'margin-top:50px' : _">th:styleappend Test content </div>
After rendering
3、 ... and . Custom properties
<!-- data- Custom attributes can be directly accessed through th: In the form of -->
<div th:data-custom-name="*{name}">th:data- Property test content </div>
<!-- th: Any attribute name The way , You can add any attribute -->
<div th:haha="*{name}">th: Any attribute test content </div>
<hr>
After rendering
Four . data-th- How to write the attribute name
<!-- data-th- Property name and th: Attribute names work the same , It's just that the writing is different -->
<div data-th-class="*{name}">data-th- Test content </div>
<div th:class="*{name}">th:class Test content </div>
After rendering
边栏推荐
- 04_ Use of solrj7.3 of solr7.3
- OSI and tcp/ip protocol cluster
- 神经网络物联网未来发展趋势怎么样
- How to introduce devsecops into enterprises?
- 基于 TiDB 场景式技术架构过程 - 理论篇
- 怎么叫一手一机的功能方式
- Enjoy what you want. Zhichuang future
- 判断变量是否为数组
- R language ggplot2 visual bar graph: visualize the bar graph through the two-color gradient color theme, and add label text for each bar (geom_text function)
- 金融壹賬通香港上市:市值63億港元 葉望春稱守正篤實,久久為功
猜你喜欢
【学习笔记】阶段测试1
TDengine 社区问题双周精选 | 第三期
How to deeply understand the design idea of "finite state machine"?
神经网络物联网未来发展趋势怎么样
Sorter evolution of ticdc 6.0 principle
Interpretation of tiflash source code (IV) | design and implementation analysis of tiflash DDL module
ASP. Net large takeout ordering system source code (PC version + mobile version + merchant version)
Oneconnect listed in Hong Kong: with a market value of HK $6.3 billion, ye Wangchun said that he was honest and trustworthy, and long-term success
How to introduce devsecops into enterprises?
为什么我认识的机械工程师都抱怨工资低?
随机推荐
R语言使用ggplot2包的geom_histogram函数可视化直方图(histogram plot)
R language ggplot2 visualization: use ggplot2 to visualize the scatter diagram, and use the labs parameter to customize the X axis label text (customize X axis labels)
Discussion on memset assignment
TDengine 社区问题双周精选 | 第三期
治臻新能源冲刺科创板:年营收2.2亿 上汽创投是股东
[buuctf.reverse] 152-154
基于 TiDB 场景式技术架构过程 - 理论篇
04_ Use of solrj7.3 of solr7.3
Geom of R language using ggplot2 package_ Histogram function visual histogram (histogram plot)
神经网络物联网未来现状和趋势及看法
为什么我认识的机械工程师都抱怨工资低?
Simple process of penetration test
R語言ggplot2可視化:可視化折線圖、使用theme函數中的legend.position參數自定義圖例的比特置
Redis如何实现多可用区?
判断变量是否为数组
PHP5下WSDL,SOAP调用实现过程
汇编语言 assembly language
不相交集
What are the advantages and characteristics of SAS interface
如何将 DevSecOps 引入企业?