如何用Thymeleaf将数据库数据展示在单个div中？

你遇到的错误是因为HTML元素不允许重复定义同一个属性，Thymeleaf同样遵循这个规则，所以重复使用th:text会抛出语法错误。下面提供几种可行的解决方案，同时满足你在单个div中展示两个字段、后续支持点击的需求：

方法1：使用Thymeleaf管道语法拼接文本 #

这是最简洁的方式，适合不需要单独样式的简单拼接：

<div th:each="wallet : ${wallet}">
    <div class="wallet" th:text="|${wallet.walletName}: ${wallet.initialBalance}|"></div>
    <br>
</div>

管道语法|...|可以直接将变量与静态文本组合，Thymeleaf会自动解析其中的表达式。

方法2：使用内联表达式插入变量 #

如果需要更灵活的排版（比如添加换行、分隔符），可以在div内部用内联表达式[[${}]]：

<div th:each="wallet : ${wallet}">
    <div class="wallet">
        [[${wallet.walletName}]]
        <br>
        [[${wallet.initialBalance}]]
    </div>
    <br>
</div>

内联表达式会直接把变量值渲染到页面中，适合需要调整内部布局的场景。

方法3：用span包裹字段（推荐，支持单独样式与点击） #

如果后续需要给名称和余额设置不同样式，或者要实现点击功能，推荐用span拆分字段，并在父div上添加点击事件：

<div th:each="wallet : ${wallet}">
    <!-- 用th:onclick绑定点击事件，传递钱包ID作为参数 -->
    <div class="wallet" th:onclick="'handleWalletClick(' + ${wallet.id} + ')'">
        <span class="wallet-name">[[${wallet.walletName}]]</span>
        <span class="balance">¥[[${wallet.initialBalance}]]</span>
    </div>
    <br>
</div>

同时可以给.wallet类添加CSS样式优化交互：

.wallet {
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    background-color: #f5f5f5;
}
.wallet-name {
    font-weight: bold;
    margin-right: 10px;
}
.balance {
    color: #2ecc71;
}

这样既解决了单div展示多字段的问题，也为后续的点击交互和样式调整留足了空间。

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