25-springboot-thymeleaf的常见属性
th:action
<form id="login" th:action="@{/login}">......</form>
th:method
<form id="login" th:action="@{/login}" th:method="post">......</form>
th:href
<a class="login" th:href="@{/login}">登录</a>
th:id
<span th:id="${msg}">aaa</span>
<input id="nick" name="nick">
th:name
<input th:type="text" th:id="phone" th:name="phone">
th:value
<input type="hidden" id="userId" name="userId" th:value="${user.id}">
th:attr
<input type="hidden" id="userId" name="userId" th:attr="value=${userId}" >
th:text 用于文本的显示
<input type="text" id="realName" name="reaName" th:text="${realName}">
th:onclick
th:onclick="'getCollect()'"
th:style
th:style="'display:none;'"
th:if
条件判断,比如后台传来一个变量,判断该变量的值,1为男,2为女:
<span th:if="${sex} == 1" >
<input type="radio" name="se" th:value="nan" />
</span>
<span th:if="${sex} == 2">
<input type="radio" name="se" th:value="nv" />
</span>
th:unless
th:unless是th:if的一个相反操作:
<span th:unless="${sex} == 1" >
<input type="radio" name="se" th:value="nv" />
</span>
<span th:unless="${sex} == 2">
<input type="radio" name="se" th:value="nan" />
</span>
th:src
常与@{}表达式结合使用;
<script th:src="@{/js/jquery.min.js}"></script>
<img th:src="@{/image/beijing.gif}"/> 导入图片
th:each
这个属性非常常用,用于对集合进行遍历输出,它与JSTL中的<c: forEach>类似;
<tr th:each="user, interStat : ${userList}">
<td th:text="${interStat.index}"></td>
<td th:text="${user.id}"></td>
<td th:text="${user.nick}"></td>
<td th:text="${user.phone}"></td>
<td th:text="${user.email}"></td>
<td th:text="${user.address}"></td>
</tr>
Map类型的循环:
<div th:each="myMapVal : ${myMap}">
<span th:text="${myMapVal.key}"></span>
<span th:text="${myMapVal.value}"></span>
</div>
${myMapVal.key} 是获取map中的key,${myMapVal.value} 是获取map中的value;
数组类型的循环:
<div th:each="myArrayVal : ${myArray}">
<div th:text="${myArrayVal}"></div>
</div>
th:inline
内联文本、内联脚本
th:inline 有三个取值类型 (text, javascript 和 none)
该属性使用内联表达式[[…]]展示变量数据,比如:
内联文本
<span th:inline="text">
Hello, [[${user.nick}]]
</span>
等同于:
<span>
Hello, <span th:text="${user.nick}"></span>
</span>
th:inline写在任何父标签都可以,比如如下也是可以的:
<body th:inline="text">
...
<span>[[${user.nick}]]</span>
...
</body>
使用场景:如果你不想依赖html标签就能进行动态数据展示,那么可以使用内联文本;
内联脚本
<script th:inline="javascript" type="text/javascript">
var user = [[${user.phone}]];
alert(user);
</script>
使用场景:如果你需要在javascript代码中获取动态数据,那么就需要使用内联脚本;