Thymeleaf模板頁面使用th:classappend
在HTML標籤既有的class
屬性值額外附加其他class。
參考「Spring Boot Thymeleaf 簡單範例」的hello.html
並修改如下。
hello.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello Thymeleaf</title>
<style>
.text-blue {
color:blue;
}
.bg-yellow {
background-color:yellow;
}
.bg-orange {
background-color:orange;
}
</style>
</head>
<body>
<p th:text="'Hello, ' + ${name} + '!'"
class="text-blue"
th:classappend="${name.length() gt 5} ? 'bg-yellow' : 'bg-orange'"/>
</body>
</html>
<p>
標籤現有class="text-blue"
屬性值,使用th:classappend
並判斷name
的長度是否大於5,是則附加class bg-yellow
,反之附加class bg-orange
。
所以當name
長度超過5時,返回的html為:
<p class="text-blue bg-yellow">Hello, ...!</p>
反之為
<p class="text-blue bg-orange">Hello, ...!</p>
沒有留言:
張貼留言