如何用Thymeleaf的th:classappend为三类Badge添加不同背景类

方法1：嵌套三元表达式 #

直接在th:classappend中用嵌套三元判断，适合分支较少的场景：

<div class="badge text-white position-absolute" 
     th:text="${content.category}"
     th:classappend="${content.category == 'FREE'} ? 'bg-primary' : 
                    (${content.category == 'BASE'} ? 'bg-dark' : 'bg-danger')">
</div>

如果需要处理未匹配的异常值，可追加默认兜底类：

th:classappend="${content.category == 'FREE'} ? 'bg-primary' : 
               (${content.category == 'BASE'} ? 'bg-dark' : 
               (${content.category == 'PREMIUM'} ? 'bg-danger' : 'bg-secondary'))"

方法2：Thymeleaf Switch-Case结构 #

用th:switch+th:case实现多分支判断，可读性更强，适合后续可能扩展分类的场景：

<div class="badge text-white position-absolute" 
     th:text="${content.category}"
     th:switch="${content.category}">
    <th:block th:case="'FREE'" th:classappend="bg-primary"></th:block>
    <th:block th:case="'BASE'" th:classappend="bg-dark"></th:block>
    <th:block th:case="'PREMIUM'" th:classappend="bg-danger"></th:block>
    <!-- 可选：默认兜底样式 -->
    <th:block th:case="*" th:classappend="bg-secondary"></th:block>
</div>

方法3：后端逻辑封装（推荐） #

把分类与样式的映射逻辑放到后端代码中，模板仅负责调用，更符合职责分离：

后端Java代码示例 #

public class Content {
    private String category;

    // 其他字段、getter/setter省略

    public String getCategoryBgClass() {
        return switch (this.category) {
            case "FREE" -> "bg-primary";
            case "BASE" -> "bg-dark";
            case "PREMIUM" -> "bg-danger";
            default -> "bg-secondary"; // 默认兜底样式
        };
    }
}

前端模板代码 #

<div class="badge text-white position-absolute" 
     th:text="${content.category}"
     th:classappend="${content.categoryBgClass}">
</div>

内容的提问来源于stack exchange，提问作者oxyt