thyemeleaf之常用标签

淩亂°似流年 2022-03-20 03:22 310阅读 0赞

### 常用th标签 ###

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>功能</th> 
   <th>实例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>th:id</td> 
   <td>替换id</td> 
   <td><code>&lt;input th:id=" ${user.id}"/&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:text</td> 
   <td>文本替换</td> 
   <td><code>&lt;p th:text="${user.name}"&gt;username&lt;/p&gt;</code> </td> 
  </tr> 
  <tr> 
   <td>th:utext</td> 
   <td>支持html的文本替换</td> 
   <td><code>&lt;p th:utext="${htmlcontent}"&gt;content&lt;/p&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:value</td> 
   <td>属性赋值</td> 
   <td><code>&lt;input th:value = "${user.name}" /&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:object</td> 
   <td>替换对象</td> 
   <td><code>&lt;div th:object="${user}"&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:with</td> 
   <td>变量赋值运算</td> 
   <td><code>&lt;div th:with="isEvens = ${prodStat.count}%2 == 0"&gt;&lt;/div&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:style</td> 
   <td>设置样式</td> 
   <td><code>&lt;div th:style="'display:' + @{(${sitrue} ? 'none' : 'inline- block')} + ''"&gt;&lt;/div&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:onclick</td> 
   <td>点击事件</td> 
   <td><code>&lt;td th:onclick = "'login()'"&gt;&lt;/td&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:each</td> 
   <td>属性赋值</td> 
   <td><code>&lt;tr th:each = "user,userStat:${users}"&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:if</td> 
   <td>判断条件</td> 
   <td><code>&lt;a th:if = "${userId == collect.userId}"&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:unless</td> 
   <td>和th:if判断相反</td> 
   <td><code>&lt;a th:href="@{/login} th:unless=${session.user != null}"&gt;Login&lt;/a&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:href</td> 
   <td>链接地址</td> 
   <td><code>&lt;a th:href="@{/login}" th:unless=${session.user != null}&gt;Login&lt;/a&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:switch</td> 
   <td>多路选择配合th:case使用</td> 
   <td><code>&lt;div th:switch="${user.role}"&gt;</code><br><code>&lt;p th:case = "'admin'"&gt;User is an administrator&lt;/p&gt;</code><br> <code>&lt;/div &gt;</code><br></td> 
  </tr> 
  <tr> 
   <td>th:fragment</td> 
   <td>th:switch的一个分支</td> 
   <td><code></code></td> 
  </tr> 
  <tr> 
   <td>th:includ</td> 
   <td>布局标签，替换内容到引入的文件</td> 
   <td><code>&lt;head th:include="layout :: htmlhead" th:with="title='xx'"&gt;&lt;/head&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:replace</td> 
   <td>布局标签，替换整个标签到引入的文件</td> 
   <td><code>&lt;div th:replace="fragments/header :: title"&gt;&lt;/div&gt; </code></td> 
  </tr> 
  <tr> 
   <td>th:selectd</td> 
   <td>selected选择框选中</td> 
   <td><code>th:selected="(${xxx.id} == ${configObj.dd})"</code></td> 
  </tr> 
  <tr> 
   <td>th:src</td> 
   <td>图片类地址引入</td> 
   <td>本地图片<code>&lt;img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" /&gt;</code><br> 获取参数<code>&lt;img th:src="@{${data.img}}" /&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:inline</td> 
   <td>定义js脚本可以使用变量</td> 
   <td><code>&lt;script type="text/javascript" th:inline="javascript"&gt; </code></td> 
  </tr> 
  <tr> 
   <td>th:action</td> 
   <td>表单提交的地址</td> 
   <td><code>&lt;form action="login.html" th:action="@{/login}"&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:remove</td> 
   <td>删除某个属性</td> 
   <td><code>&lt;tr th:remove="all"&gt; 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。</code></td> 
  </tr> 
  <tr> 
   <td>th:attr</td> 
   <td>设置标签属性，多个属性可以用逗号分隔</td> 
   <td><code>比如 th:attr="src=@{/image/aa.jpg},title=#{logo}"，此标签不太优雅，一般用的比较少。</code></td> 
  </tr> 
 </tbody> 
</table>

#### 一.多个参数传递格式 ####

th:href="@{/Controller/getName(param1=1,param2=${user.id})}"

如果是多个参数的话,使用逗号隔开

#### 二.使用Jquery获取Thymeleaf中的参数 ####

1.方法一

<p th:text="#{msg}">默认的msg</p>
    
    <script th:inline="javascript">
        var data= [[${ data}]];
        console.log(data);
    </script>

2.方法二 使用隐藏域

<p th:value="#{msg}" type="hidden" id="data">default message</p>
    //获取隐藏域里面的参数
    <script  type="text/javascript">
        var data=${ "#data"}.val()；
        var data=$("#data").val()；
    </script>