Thymeleaf的循环遍历(三种遍历方式)

深藏阁楼爱情的钟 2023-09-29 08:23 10阅读 0赞

#### 文章目录 ####

*  循环遍历list集合
 *  循环遍历map集合
 *  循环遍历数组

## 循环遍历list集合 ##

1.实体类(使用lombok插件，省去getter和setter，toString等方法的书写)  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_11_color_FFFFFF_t_70_g_se_x_16_pic_center]  
代码

package com.springboot_thyleaf2.model;
    
    import lombok.Data;
    
    @Data
    public class User {
        
        private Integer id;
        private String nick;
        private String phone;
        private String address;
    }

2.控制类(使用controller等注解)  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_19_color_FFFFFF_t_70_g_se_x_16_pic_center]  
代码

import java.util.ArrayList;
    import java.util.List;
    
    @Controller
    public class UserController {
        
        @RequestMapping("/each/list")
        public String eachList(Model model){
        
            List<User> userList=new ArrayList<>();
            for (int i=0;i<10;i++){
        
                User user=new User();
                user.setId(100+i);
                user.setNick("陈"+i);
                user.setPhone("123456"+i);
                user.setAddress("苏杭"+i);
                userList.add(user);
            }
            model.addAttribute("userList",userList);
            return "eachList";
        }
    }

3.each.html  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]  
代码

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org" >
    <head>
        <meta charset="UTF-8">
        <title>循环遍历list集合</title>
    </head>
    <body>
    <div th:each="user,userStat:${userList}">
        <span th:text="${userStat.current}"/>
        <span th:text="${user.id}"/>
        <span th:text="${user.nick}"/>
        <span th:text="${user.phone}"/>
        <span th:text="${user.address}"/>
    </div>
    </body>
    </html>

说明

> 1.user指的是当前循环的对象的变量名称，可以随意定义，但要于下面 " . 属性"引用保持一致相当于增强for循环的临时变量；  
> 2.userStat指当前循环对象状态的变量(可选，默认就是你第一步设置的对象变量名称+ Stat)  
> 3.$\{userList \}是当前循环的集合

其中userStat有很多属性

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]  
他们的结果按顺序展示如下  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]

> current展示当前的user对象  
> index是索引属性，从0开始  
> count是计数，下标从1开始  
> first，last，odd，even均是返回boolean值，分别判断下标是否为第一个/最后一个/奇数/偶数  
> size指的是当前userList的大小，返回的是同一个值

## 循环遍历map集合 ##

1.控制类  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_17_color_FFFFFF_t_70_g_se_x_16_pic_center]  
代码

@RequestMapping("/each/map")
        public String eachMap(Model model){
        
            Map<Integer,Object> userMaps=new HashMap<>();
            for(int i=0;i<10;i++){
        
                User user=new User();
                user.setId(i);
                user.setNick("王"+i);
                user.setPhone("123456"+i);
                user.setAddress("苏杭"+i);
                userMaps.put(i,user);
            }
            model.addAttribute("userMaps",userMaps);
            return "eachMap";
        }
    }

2.each.html  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_15_color_FFFFFF_t_70_g_se_x_16_pic_center]  
代码

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org" >
    <head>
        <meta charset="UTF-8">
        <title>循环遍历Map集合</title>
    </head>
    <body>
    <div th:each="userMap,userMapStat:${userMaps}">
        <span th:text="${userMapStat.index}"/>
        <span th:text="${userMapStat.count}"/>
        <span th:text="${userMap.getKey()}"/>
        <span th:text="${userMap.value}"/>
        <span th:text="${userMap.value.id}"/>
        <span th:text="${userMap.value.nick}"/>
        <span th:text="${userMap.value.phone}"/>
        <span th:text="${userMap.value.address}"/>
    
    </div>
    </body>
    </html>

map遍历结果  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]

> map集合和list集合遍历类似

## 循环遍历数组 ##

> 数组的遍历和list的遍历一样，看到这里可以不用看了。。。。

控制类代码

@RequestMapping("/each/array")
        public String eachArray(Model model){
        
            User[] userArray=new User[10];
            for(int i=0;i<10;i++){
        
                User user=new User();
                user.setId(i);
                user.setNick("李"+i);
                user.setPhone("123456"+i);
                user.setAddress("苏杭"+i);
                userArray[i]=user;
            }
            model.addAttribute("userArray",userArray);
            return "eachArray";
        }
    }

eachArray.html

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org" >
    <head>
        <meta charset="UTF-8">
        <title>循环遍历数组</title>
    </head>
    <body>
    <div th:each="user,userStat:${userArray}">
        <span th:text="${userStat.index}"/>
        <span th:text="${userStat.count}"/>
        <span th:text="${user.id}"/>
        <span th:text="${user.nick}"/>
        <span th:text="${user.phone}"/>
        <span th:text="${user.address}"/>
    </div>
    </body>
    </html>

遍历结果  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_9_color_FFFFFF_t_70_g_se_x_16_pic_center]

三种遍历方式到这里就结束了，如果有什么不对的地方还请大佬指正。另外

![在这里插入图片描述][eda7ab7ca9bf439d9edea0a4bf49a21a.png_pic_center]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_11_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/b4ff08d7ef8240669335ca07c0b04270.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_11,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_19_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/5235fa63245b4244a8ed14a037fab93a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_19,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/a89cbfe3f45a43058b6838333d6e794b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: https://img-blog.csdnimg.cn/e66ea24436684494bec72c54df2cbaca.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: https://img-blog.csdnimg.cn/7ff06efd2ac84db39de7990ccb879a18.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_17_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/b6aca337a7244450b624222c02d1091c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_17,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_15_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/22ac3ce56a8246ee9ae5e7451a611d84.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_15,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]: https://img-blog.csdnimg.cn/0c7f381f15b54b4092365ab6063c1d22.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_9_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/f8b762675c4e4e279d27d7d242c2ae5a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_9,color_FFFFFF,t_70,g_se,x_16#pic_center
[eda7ab7ca9bf439d9edea0a4bf49a21a.png_pic_center]: https://img-blog.csdnimg.cn/eda7ab7ca9bf439d9edea0a4bf49a21a.png#pic_center