Thymeleaf入门（二）

超、凢脫俗 2022-05-11 13:10 332阅读 0赞

## 常用标签介绍： ##

### 1.简单好理解的几个标签： ###

<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=" 'xx' + ${user.id}"&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:value</td> 
   <td>属性赋值，替换value</td> 
   <td><code>&lt;input th:value="${user.name}"</code></td> 
  </tr> 
  <tr> 
   <td>th:style</td> 
   <td>替换style设置样式</td> 
   <td><code>&lt;input type="text" th:style=" 'background:' + 'red' "/&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:if</td> 
   <td>判断为true显示，反之</td> 
   <td><code>&lt;div th:if="1==2"&gt;1不等于2，文字不显示&lt;/div&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:unless</td> 
   <td>判断为false显示，反之</td> 
   <td><code>&lt;div th:unless="1==2"&gt;1不等于2，文字显示&lt;/div&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:href</td> 
   <td>链接地址</td> 
   <td><code>&lt;a th:hred="@{/login}"/&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:selected</td> 
   <td>判断为true选中选择框，反之</td> 
   <td><code>&lt;option th:selected="${name}==${getName}"&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:src</td> 
   <td>图片类地址引入</td> 
   <td><code>&lt;img th:src="@{/img/logo.jpg}"/&gt;</code></td> 
  </tr> 
  <tr> 
   <td>th:remove</td> 
   <td>删除属性</td> 
   <td><code>&lt;tr th:remove="all"&gt;</code>1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。</td> 
  </tr> 
  <tr> 
   <td>th:inline</td> 
   <td>定义js脚本可以使用变量</td> 
   <td><code>&lt;script type="text/javascript" th:inline="javascript"&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

### 2. th:text和th:utext。 ###

th:text标签用于替换文本，th:utext也使用来替换文本，但是它会解析其中的html代码。例如：  
![在这里插入图片描述][70]  
页面效果：![在这里插入图片描述][70 1]

### 3. th:onclick标签 ###

该标签常用于触发js的方法，但是在thymeleaf中想要传参数使用变量表达式就必须只能在th标签中，所以在需要传参时用th:onclick比原生的onclick要更简单方便。

先定义两个js方法
            function test(msg) {
                alert(msg)
            }
            function test2() {
                alert(2)
            }

在下面的代码中调用的是无参的test2方法：

1.  在双引号中先打入单引号 `th:onclick=" ' ' "`
2.  接着输入JavaScript : 方法名。`th:onclick=" ' JavaScript:test() ' "`

然后是带参数的写法：

1.  `th:onclick=" ' JavaScript:test() ' "`加入参数时需要加入\\转义字符表示出参数是加在外层单引号中的。 `'javascript:test(\''+${name}+'\')'`

### 4. th:with标签 ###

该标签用于定义局部变量例如：

注意定义的name2局部变量只能在定义的div块中使用

### 5. th:each标签： ###

该标签常用于迭代数组，集合等。

res为迭代结果，iter为下标对象，$\{list\}为集合。

下标对象使用方法：

下标对象中的字段有：

1.  index，当前迭代的索引，从0开始
2.  count，当前迭代的索引，从1开始
3.  size，总迭代次数
4.  current，同res，是当前迭代的值
5.  even/odd，判断当前迭代的是奇数还是偶数，布尔属性
6.  first/last，判断是不是第一个或者是最后一个，布尔属性

### 6. th:switch标签 ###

需要配合th:case，和Java中的switch用法相同。

当case中的值和switch中的相同时显示，栗子中显示为1

### 7. th:fragment标签和th:insert，th:replace，th:include标签 ###

在常常会用到的标签中添加配置th:fragment后即可在其他位置调用。  
例如：在template/test文件夹下创建一个fragment.html文件代码如下：

接着在其他文件中进行导入，可以使用三个标签：

> th:insert ：保留自己的主标签，保留th:fragment的主标签。  
> th:replace：不要自己的主标签，保留th:fragment的主标签。  
> th:include ：保留自己的主标签，不要th:fragment的主标签。

导入代码：
    <div th:insert="footer :: copy"></div>
    <div th:replace="footer :: copy"></div>
    <div th:include="footer :: copy"></div>
    
    结果：
    <div>
        <footer>
           <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
        </footer>  
    </div>  
     
    <footer>
      <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
    </footer>  
     
    <div>
      <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
    </div>

### 8.内联语法 ###

1.  文本内联： th:inline=“text”

1.  JavaScript脚本内联： th:inline=“javascript”

[70]: /images/20220505/45deb96864d84621a0bde30f3ccdec48.png
[70 1]: /images/20220505/9d9b55cb819f482db0405edcdb124f79.png