如何使用Thymeleaf实现商品总费用的变量计算？

你这段代码的核心问题是**th:with定义的变量是局部作用域**：外层div中声明的tot，和循环内th:block里的tot是完全独立的变量。每次循环都会重新创建一个新的tot，根本无法实现累加效果。

推荐三种常用方案，按合理性排序：

方案1：后端提前计算总费用（最优） #

把计算逻辑放在后端（服务层/控制器），直接将总费用作为变量传递到前端，避免在模板中处理复杂计算，符合前后端职责分离原则。

后端示例（Java）： #

// 假设DTO类包含getPrice()、getCount()方法，用BigDecimal处理金额避免精度问题
BigDecimal totalAmount = list.stream()
    .map(dto -> dto.getPrice().multiply(new BigDecimal(dto.getCount())))
    .reduce(BigDecimal.ZERO, BigDecimal::add);
model.addAttribute("totalAmount", totalAmount);

前端Thymeleaf代码： #

<div class="wrap">
    <li class="p-list" th:each="dto:${list}">
        <p class="p-sprice" th:text="${dto.price}"></p>
        <p class="p-count" th:text="${dto.count}"></p>
    </li>
    <!-- 直接渲染后端计算好的总费用 -->
    <p class="total-price" th:text="|总费用：${totalAmount}|"></p>
</div>

方案2：用Thymeleaf内置聚合工具计算 #

如果必须在前端模板中计算，可以利用Thymeleaf的#aggregates工具类结合投影表达式实现：

<div class="wrap">
    <li class="p-list" th:each="dto:${list}">
        <p class="p-sprice" th:text="${dto.price}"></p>
        <p class="p-count" th:text="${dto.count}"></p>
    </li>
    <!-- 投影表达式提取每个商品的总价，再求和 -->
    <p class="total-price" th:text="|总费用：${#aggregates.sum(list.![count * price])}|"></p>
</div>

• list.![count * price]是Thymeleaf投影语法，会把集合中每个元素的count*price提取为新的数值集合
• #aggregates.sum()对这个数值集合求和

方案3：前端JavaScript动态计算 #

如果需要支持用户修改数量后实时更新总费用，用JS遍历DOM元素计算：

<div class="wrap">
    <li class="p-list" th:each="dto:${list}" data-price="${dto.price}" data-count="${dto.count}">
        <p class="p-sprice" th:text="${dto.price}"></p>
        <p class="p-count" th:text="${dto.count}"></p>
    </li>
    <p class="total-price">总费用：<span id="totalAmount">0</span></p>
</div>

<script>
    window.addEventListener('load', () => {
        let total = 0;
        document.querySelectorAll('.p-list').forEach(item => {
            const price = parseFloat(item.dataset.price);
            const count = parseInt(item.dataset.count);
            total += price * count;
        });
        document.getElementById('totalAmount').textContent = total.toFixed(2); // 保留两位小数
    });
</script>

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