Thymeleaf语法大全：30个实用示例
Thymeleaf 语法示例大全
下面是一些实用的 Thymeleaf 语法示例，帮助您更好地理解和使用 Thymeleaf：
1. 基本变量输出
<!-- 简单变量 -->
<p>用户名: <span th:text="${user.name}">默认用户名</span></p><!-- 内联表达式 -->
<p>欢迎, [[${user.name}]]!</p><!-- 默认值 -->
<p>邮箱: <span th:text="${user.email} ?: '未设置'">user@example.com</span></p>2. 条件判断
<!-- if/unless -->
<div th:if="${user.admin}"><p class="admin-badge">管理员用户</p>
</div><div th:unless="${user.active}"><p class="inactive">账户未激活</p>
</div><!-- switch/case -->
<div th:switch="${user.role}"><p th:case="'admin'" class="role-admin">管理员</p><p th:case="'editor'" class="role-editor">编辑</p><p th:case="*" class="role-default">普通用户</p>
</div>3. 循环迭代
<!-- 简单列表 -->
<ul class="user-list"><li th:each="user : ${users}" th:text="${user.name}">用户名称</li>
</ul><!-- 带状态的循环 -->
<table class="user-table"><tr th:each="user, stat : ${users}"><td th:text="${stat.index + 1}">序号</td><td th:text="${user.name}">名称</td><td th:text="${user.email}">邮箱</td><td><span th:if="${stat.odd}" class="odd-row">奇数行</span><span th:if="${stat.even}" class="even-row">偶数行</span></td></tr>
</table>4. 链接和URL
<!-- 基本链接 -->
<a th:href="@{/products}" class="nav-link">产品列表</a><!-- 带参数的链接 -->
<a th:href="@{/product/details(id=${product.id}, type='info')}" class="product-link">查看详情
</a><!-- 图片资源 -->
<img th:src="@{/images/logo.png}" alt="公司Logo" class="logo">5. 表单处理
<form th:action="@{/user/save}" th:object="${user}" method="post" class="user-form"><div class="form-group"><label>用户名</label><input type="text" th:field="*{name}" class="form-control"></div><div class="form-group"><label>邮箱</label><input type="email" th:field="*{email}" class="form-control"><small th:if="${#fields.hasErrors('email')}" th:errors="*{email}" class="error-message"></small></div><div class="form-group"><label>角色</label><select th:field="*{role}" class="form-select"><option value="user">普通用户</option><option value="admin">管理员</option><option value="editor">编辑</option></select></div><button type="submit" class="btn btn-primary">保存</button>
</form>6. 日期和数字格式化
<p>注册日期: <span th:text="${#dates.format(user.registerDate, 'yyyy-MM-dd HH:mm')}">2023-01-01 12:00</span>
</p><p>账户余额: <span th:text="${#numbers.formatCurrency(user.balance)}">$100.00</span>
</p><p>折扣: <span th:text="${#numbers.formatPercent(user.discount, 1, 2)}">10%</span>
</p>7. 字符串操作
<p>大写用户名: <span th:text="${#strings.toUpperCase(user.name)}">USER</span>
</p><p>邮箱前缀: <span th:text="${#strings.substringBefore(user.email, '@')}">username</span>
</p><p>描述摘要: <span th:text="${#strings.abbreviate(user.description, 50)}">描述摘要...</span>
</p>8. 集合操作
<p>用户数量: <span th:text="${#lists.size(users)}">10</span>
</p><p>包含管理员: <span th:text="${#sets.contains(user.roles, 'admin')}">是/否</span>
</p><p>第一个用户: <span th:text="${users[0].name}">第一个用户</span>
</p>9. 内联 JavaScript
<script th:inline="javascript">/*<![CDATA[*/var userData = {id: [[${user.id}]],name: /*[[${user.name}]]*/ '默认用户名',isAdmin: [[${user.admin}]]};console.log("用户数据:", userData);function showUserInfo() {alert("欢迎, " + userData.name + "!");}/*]]>*/
</script>10. 内联 CSS
<style th:inline="css">.user-card {background-color: [[${user.bgColor}]]; /* 使用变量设置背景色 */color: /*[[${user.textColor} ?: '#333']]*/ #333;border: 1px solid /*[[${user.borderColor}]]*/ #ddd;}.admin-user {display: [[${user.admin} ? 'block' : 'none']];}
</style>11. 模板布局
<!-- 公共头部片段 (common.html) -->
<header th:fragment="site-header" class="site-header"><div class="logo"><img th:src="@{/images/logo.png}" alt="Logo"></div><nav class="main-nav"><a th:href="@{/}">首页</a><a th:href="@{/products}">产品</a><a th:href="@{/about}">关于我们</a></nav>
</header><!-- 使用片段 -->
<div th:replace="~{common :: site-header}"></div>12. 实用工具对象
<p>当前日期: <span th:text="${#dates.createNow()}">2023-01-01</span>
</p><p>随机数: <span th:text="${#numbers.randomInt(100)}">42</span>
</p><p>字符串连接: <span th:text="${#strings.concat(user.firstName, ' ', user.lastName)}">全名</span>
</p>13. 国际化
<h1 th:text="#{page.title}">默认标题</h1><p th:text="#{welcome.message(${user.name})}">欢迎, {0}!
</p><select class="lang-select"><option th:each="lang : ${#locale.availableLocales}"th:value="${lang}"th:text="${#messages.msg('language.' + lang)}"th:selected="${#locale.toString() == lang.toString()}">语言</option>
</select>14. 安全表达式
<!-- 转义HTML -->
<p th:text="${user.bio}">用户简介</p><!-- 不转义HTML -->
<p th:utext="${user.htmlContent}">HTML内容</p><!-- 安全URL -->
<a th:href="@{${user.website}}" th:if="${#strings.startsWith(user.website, 'http')}">个人网站
</a>这些示例展示了 Thymeleaf 在实际开发中的各种应用场景。您可以根据具体需求组合使用这些语法，创建功能丰富、动态交互的网页应用。