Thymeleaf基础语法

最新推荐文章于 2024-10-13 22:11:23 发布

原创最新推荐文章于 2024-10-13 22:11:23 发布 · 280 阅读

1 ·

CC 4.0 BY-SA版权

Thymeleaf 专栏收录该内容

1 篇文章

订阅专栏

本文介绍Thymeleaf中表单赋值的多种方法，包括代码块插入、form表单属性赋值、循环遍历及JS中使用model传值。详细解析了th:include、th:insert、th:replace等指令的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单常用赋值方法

1. 代码块插入

- th:include
- th:insert
- th:replace

<div th:fragment="demoFrag" id="frag">
    <span style="color: red">演示文字</span>
</div>
 <div th:include="~{this::demoFrag}">
 //会将demoFrag的内容插入到此处
 	<span style="color: red">演示文字</span>
 </div>
 <div th:insert="~{this::demoFrag}">
 //会将demoFrag的内容包含父标签插入到此处
 	<div id="frag">
    	<span style="color: red">演示文字</span>
	</div>
 </div>
// th:replace 会将整个div替换掉

2.form表单赋值

th:id
th:value
th:name
th:class
…

<a href="javascript:void (0)" th:id="${person.id}" th:text="${person.name}" th:data-age="${person.age}" onclick="oncl1(this.getAttribute('data-age'))"></a>
//ps thymeleaf 2.X版本的onclik事件为下方法
<a th:onclick="|oncl1('${person.age}')|"></a>
<input th:value="${person.age}" readonly>

3.循环遍历

th:each

<ul>
 	<li th:each="item:${people}" th:class="${itemStat.even ? 'odd' :'even'}" th:text="|${item.name}:${item.age}岁3333|"></li>
//ps || 双竖线可以拼接字符串
// 表达式内也可以使用三元表单式
</ul>

4.js中使用model内的传值

<script th:inline="javascript">
    var people = [[${people}]] ;
    console.log(people);
</script>