thymeleaf th:each循环js语句
141浏览 · 2024-01-09 21:05:50
Thymeleaf 中可以使用 th:each 指令来循环遍历一个集合，同时可以在循环体中嵌入 JavaScript 代码。以下是一个示例：
```html
<li th:each="item : ${items}">
<span th:text="${item.name}"></span>
<script th:inline="javascript">
var value = [[${item.value}]]; // 在循环体中定义 JavaScript 变量
console.log(value);
</script>
在上面的例子中，我们使用 th:each 遍历了一个名为 items 的集合，循环变量名为 item，然后在循环体中嵌入了 JavaScript 代码，使用 th:inline="javascript" 指定了内联 JavaScript 模式。在 JavaScript 代码中，我们使用了 Thymeleaf 的表达式 [[${item.value}]] 来获取 item 对象中的 value 属性，并将其赋值给了 JavaScript 变量 value。最后，我们在控制台中打印了这个变量的值。
需要注意的是，在内联 JavaScript 模式下，Thymeleaf 中的表达式需要使用双重方括号 [[...]] 来包裹，以避免与 JavaScript 中的语法冲突。
相关问题
这段代码是一个在 Thymeleaf 模板中使用的循环语句，用于生成 `<option>` 元素的列表。它通过遍历 `${type}` 对象中的元素来生成多个 `<option>` 元素。
`${type}` 可能是一个包含多个字典对象的集合，每个字典对象都包含 `dictLabel` 和 `dictValue` 属性。在循环过程中，每个字典对象都会被赋值给 `dict` 变量。
在循环的每一次迭代中，使用 `th:text="${dict.dictLabel}"` 将 `dictLabel` 属性的值作为选项的显示文本，使用 `th:value="${dict.dictValue}"` 将 `dictValue` 属性的值作为选项的值。
下面是示例代码的解释：
```html
<select>
<option th:each="dict : ${type}"
th:text="${dict.dictLabel}"
th:value="${dict.dictValue}">
</option>
</select>
```