526互联

25-springboot-thymeleaf的常见属性

发布时间 2023-04-03 16:09:00作者: companion

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代码中获取动态数据，那么就需要使用内联脚本；