Thymeleaf 给 onclick 赋值及参数传递详解

本文将详细介绍使用 Thymeleaf 给 onclick 赋值并传递参数的语法，以及解决类型不匹配问题的方案。

1. Thymeleaf 给 onclick 赋值

Thymeleaf 给 onclick 赋值的语法如下：

<button th:onclick="'javascript:myFunction(''   ${variableName}   '');'">Click me</button>

其中，${variableName} 是 Thymeleaf 中的变量名，可以替换为具体的变量值。myFunction 是 JavaScript 函数的名称。在 onclick 中，我们使用单引号将整个 JavaScript 代码包含起来，并使用双引号将变量值括起来。

2. Thymeleaf 给 onclick 赋值多个参数

如果要给一个 onclick 赋值多个参数，可以使用逗号将参数分隔开。例如：

<button th:onclick="'javascript:myFunction(''   ${param1}   '',''   ${param2}   '');'">Click me</button>

其中，${param1} 和 ${param2} 是 Thymeleaf 中的变量名，可以替换为具体的变量值。在 onclick 中，我们使用单引号将整个 JavaScript 代码包含起来，并使用加号将变量值拼接在一起。myFunction 是 JavaScript 函数的名称，其中包含两个参数。点击按钮时，会将 ${param1} 和 ${param2} 作为参数传递给 JavaScript 函数。

3. 解决类型不匹配问题

在 Thymeleaf 表达式中，只有返回数字或布尔值的变量表达式是被信任的，其他类型的数据，如字符串或其他可以被渲染为文本字面值的对象，都不被信任。如果要使用字符串，可以使用单引号将字符串括起来，例如：

<p th:text="'Hello, '   ${name}   '!"></p>

如果要将布尔值转换为字符串，可以使用 Thymeleaf 的内置工具类 #boolToStr，例如：

<button id="modal-open-btn-1" data-modal-open="modal-1" th:onclick="'select_city(''   ${addresss.getProvience()}   '',''   ${addresss.getCity()}   '',''   ${addresss.getAddressLine()}   '',''   ${addresss.getPhone()}   '',''     内容：'   ${#boolToStr(addresss.getIsDefault())}   '')'"  class="btn btn-primary">修改地址</button>

这段代码中使用了 Thymeleaf 的 #boolToStr 工具类将布尔值转换为字符串，并将其作为函数参数传递。

4. 总结

本文介绍了使用 Thymeleaf 给 onclick 赋值并传递参数的语法，以及解决类型不匹配问题的方案。希望本文能够帮助您更好地理解 Thymeleaf 的使用，并解决您在实际项目中遇到的问题。