Thymeleaf常用标签

Thymeleaf常用标签

th:each

Handler:

@GetMapping("/each")
public ModelAndView each(){
   List<User> list = Arrays.asList(
           new User(1,"张三"),
           new User(2,"李四")
  );
   ModelAndView modelAndView = new ModelAndView();
   modelAndView.setViewName("testeach");
   modelAndView.addObject("list",list);
   return modelAndView;
}

实体类:

package com.southwind.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
@Data
@AllArgsConstructor
public class User {

   private  Integer id;
   private  String name;


}

html

<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org"></html>
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<table>
   <tr>
       <th>编号</th>
       <th>姓名</th>
   </tr>
   <tr th:each="user:${list}">
       <td th:text="${user.id}"></td>
       <td th:text="${user.name}"></td>
   </tr>
</table>
</body>
</html>
  • th:value

handler

@GetMapping("/value")
public ModelAndView value(){
   ModelAndView modelAndView = new ModelAndView();
   modelAndView.setViewName("testvalue");
   modelAndView.addObject("value","Spring Boot测试");
   return modelAndView;
}

html

<input type="text" th:value="${value}">
  • th:src

    用来引入静态资源,相当于HTML原生标签里的img,script里的src属性。

Spring Boot默认不会扫描 Resources 里 templates里面的html,但是会扫描 Resources 里 templates里static的html。所以通过浏览器直接访问对应的html文件会报错,必须经过handler层才能访问。static里面静态资源则相反,可以直接通过浏览器直接访问对应的html。

图片,css,js,静态加载的html都需要放置在resources/static文件中

 

 

handler

@GetMapping("/src")
public ModelAndView src(){
   ModelAndView modelAndView = new ModelAndView();
   modelAndView.setViewName("testsrc");
   modelAndView.addObject("src","/1.png");
   return modelAndView;
}

html

//<img th:src="${src}">

如果src的值,直接写在HTML中

//<img th:src="@{/1.png}">

如果只是经过前台把png,导入到html里面.(此时html和png都在static文件夹下)

//<img src="1.png">
  • th:href

    用作设置超链接的href.

handler

@GetMapping("/href")
public ModelAndView href(){
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("testhref");
modelAndView.addObject("href","https://www.baidu.com");
return modelAndView;
}

html

<a th:href="${href}">百度</a>
  • th:selected

    用作给HTML元素设置选中,条件成立则选中,否则不选中。

@GetMapping("/select")
public ModelAndView select(){
List<User> list = Arrays.asList(
new User(1,"张三"),
new User(2,"李四"),
new User(3,"王五")
);
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("testselect");
modelAndView.addObject("list",list);
modelAndView.addObject("name","李四");
return modelAndView;

}

html

<select>
<!--做一个下拉框,下拉框打开后,张三李四王五,默认是李四-->
<option th:each="user:${list}"
th:value="${user.id}"
th:text="${user.name}"
th:selected="${user.name==name}"
></option>
</select>

select标签结合th:each来使用,首先遍历list集合动态创建option元素,根据每次遍历出的user.name与业务数据中的name是否相等来决定是否要做选择。

  • th:attr

给HTML标签的任意属性赋值。

@GetMapping("/attr")
public ModelAndView attr(){
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("testattr");
modelAndView.addObject("attr","Spring Boot 测试");
return modelAndView;
}

html

<input th:attr="value=${attr}">
<input th:value="${attr}">;

posted on 2023-02-22 17:37  张铁蛋666  阅读(131)  评论(0)    收藏  举报

导航