精华内容
下载资源
问答
  • 主要介绍了Thymeleaf中th:eachth:if使用方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 今天给大家分享一个使用 thymeleaf 实现一个动态加载一二级文章分类的功能,本文通过代码讲解的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
  • 文章目录th:each 循环迭代循环基本用法获取迭代状态条件判断th:ifth:unlessth:switch th:each 循环迭代 循环基本用法 1、对于信息页面,数据格式是一样时,页面通常都是循环迭代它们,写过 JSP 的 JSTL 的就知道,...

    th:each 循环迭代

    循环基本用法

    1、对于信息页面,数据格式是一样时,页面通常都是循环迭代它们,写过 JSP 的 JSTL 的就知道,JSTL 有一个 <c:foreach>,同理 Thymeleaf 也有一个 th:each。作用都是一样的,都是用于遍历数组、List、Set、Map 等数据。

    JSP 遍历格式如下:

    <c:foreach items ="${lis}" var = "li " begin="2" end ="12">
         ${li}
    </c:foreach>
    

    Thymeleaf 遍历格式如下:

    <tr th:each="user : ${userList}">
          <td th:text="${user.name}">xxx</td>
    </tr>
    

    2、Thymeleaf th:each 遍历格式如下:

    <body>
    <!--后台控制器输出数据:model.addAttribute("userList", User.getUsers());-->
    <!--public static List<User> getUsers(),即数据格式为常见的:List<User>-->
    <table border="1">
        <thead>
        <tr>
            <th>工号</th>
            <th>姓名</th>
            <th>生日</th>
            <th>是否已婚</th>
            <th>工资</th>
        </tr>
        </thead>
        <tbody>
        <!-- 遍历集合,如果被遍历的变量 userList 为 null 或者不存在,则不会进行遍历,也不报错-->
        <tr th:each="user : ${userList}">
            <!-- 将用户的主键 uId 存在在 name 属性中-->
            <td th:text="${user.uId}" th:name="${user.uId}"></td>
            <td th:text="${user.uName}"></td>
            <!-- 使用dates对象格式化日期-->
            <td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd HH:mm')}"></td>
            <!-- 三运运算判断是否已婚-->
            <td th:text="${user.isMarry}?'':''"></td>
            <td th:text="${user.price}"></td>
        </tr>
        </tbody>
    </table>
    </body>
    
    • 1)th:each="user : ${userList},意味着对于 ${userList} 结果中的每个元素,循环迭代当前模板⽚段,并使⽤名为”user“的变量作为当前迭代元素来填充模版数据。
    • 2)如果被遍历的变量为 null,或者不存在,则直接不会遍历。
    • 3)th:each="user : ${userList} 作用域为自己的整个标签内,包括自己,如上所示为 < tr>。

    3、如下所示为遍历下拉框的代码,因为 th:each 的作用域包括自己,所以遍历与取值都在同一个 < option> 标签中:
    控制器:

    	@RequestMapping("/home")
        public String home(Map<String, Object> paramMap) {
            Station s1 = new Station("NJ");
            Station s2 = new Station("SH");
            Station s3 = new Station("BJ");
            Station s4 = new Station("NY");
            Station s5 = new Station("LSJ");
            List<Station> list = new ArrayList<>();
            list.add(s1);
            list.add(s2);
            list.add(s3);
            list.add(s4);
            list.add(s5);
            paramMap.put("stationList", list);
            paramMap.put("stationName", "SH");
            return "home";
        }
    

    页面:

    <form>
        <select id="stationSelect">
            <option>全区</option>
            <!--后台会传值:model.addAttribute("stationList", stationList); 下拉框所有选项的值-->
            <!--后台会传值:model.addAttribute("stationName", stationName); 用户当前选中的下拉框的值-->
            <option th:each="station : ${stationList}" th:text="${station.name}" th:selected="${stationName} eq ${station.name}"></option>
        </select>
    </form>
    

    在这里插入图片描述

    被迭代变量的值类型

    1、java.util.List 类型不是可以在 Thymeleaf 中使⽤迭代的唯⼀值类型,下⾯这些类型的对象都可以通过 th:each 进⾏迭代的:

    1)任何实现 java.util.Iterable 接⼝的对象,其值将被迭代器返回,⽽不需要在内存中缓存所有值。
    2)任何实现 java.util.Enumeration 接⼝的对象。
    3)任何实现 java.util.Map 接⼝的对象, 迭代映射时,iter 变量将是 java.util.Map.Entry 类。
    4)任何数组。
    5)任何其将被视为包含对象本身的单值列表。

    获取迭代状态

    迭代过程中,经常会使用到它的一些迭代状态,如:当前迭代的索引,迭代变量中的元素的总数,当前迭代的是奇数还是偶数,当前是否是第一个元素,当前是否是最后一个元素 等等。

    在 JSP 的 JSTL 中是 <c:foreach items="${list}" var =“li” varStatus=“status”> 里面的 status 属性。

    使⽤ th:each 时,Thymeleaf 提供了⼀种⽤于跟踪迭代状态的机制:状态变量。状态变量在每个 th:each 属性中定义,并包含以下数据:

    1)index 属性:当前迭代索引,从0开始
    2)count 属性:当前的迭代计数,从1开始
    3)size 属性:迭代变量中元素的总量
    4)current 属性:每次迭代的 iter 变量,即当前遍历到的元素
    5)even/odd 布尔属性:当前的迭代是偶数还是奇数。
    6)first 布尔属性:当前的迭代是否是第⼀个迭代
    7)last 布尔属性:当前的迭代是否是最后⼀个迭代。

    <body>
    <!--后台控制器输出数据:model.addAttribute("userList", User.getUsers());-->
    <!--public static List<User> getUsers(),即数据格式为常见的:List<User>-->
    <table border="1">
        <thead>
        <tr>
            <th>序号</th>
            <th>工号</th>
            <th>姓名</th>
            <th>生日</th>
            <th>是否已婚</th>
            <th>工资</th>
        </tr>
        </thead>
        <tbody>
        <!-- 遍历集合,如果被遍历的变量 userList 为 null 或者不存在,则不会进行遍历,也不报错-->
        <!-- 设置状态变量 loopStatus,逗号分隔,当为奇数行时,设置一个 css2 样式-->
        <tr th:each="user,loopStatus: ${userList}" th:class="${loopStatus.odd}?'css2'">
            <!-- 显示当前的行序号-->
            <td th:text="${loopStatus.count}"></td>
            <!-- 将用户的主键 uId 存在在 name 属性中-->
            <td th:text="${user.uId}" th:name="${user.uId}"></td>
            <td th:text="${user.uName}"></td>
            <!-- 使用dates对象格式化日期-->
            <td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd HH:mm')}"></td>
            <!-- 三运运算判断是否已婚-->
            <td th:text="${user.isMarry}?'':''"></td>
            <td th:text="${user.price}"></td>
        </tr>
        </tbody>
    </table>
    

    在这里插入图片描述
    迭代状态变量(本示例中的 loopStatus )在 th:each 属性中通过在变量 user 之后直接写其名称来定义,⽤逗号分隔。 与 iter 变量⼀样,状态变量的作⽤范围也是 th:each 属性的标签定义的代码⽚段中。

    如果没有显式地设置状态变量,则 Thymeleaf 将始终创建⼀个默认的迭代变量,该状态迭代变量名称为:迭代变量+“Stat”。

        <tbody>
        <!-- 遍历集合,如果被遍历的变量 userList 为 null 或者不存在,则不会进行遍历,也不报错-->
        <!-- 没有显示设置状态变量时,Thymeleaf 默认创建一个 userStat 状态变量,直接使用即可-->
        <tr th:each="user:${userList}" th:class="${userStat.odd}?'css2'">
            <!-- 显示当前的行序号-->
            <td th:text="${userStat.count}"></td>
            <!-- 将用户的主键 uId 存在在 name 属性中-->
            <td th:text="${user.uId}" th:name="${user.uId}"></td>
            <td th:text="${user.uName}"></td>
            <!-- 使用dates对象格式化日期-->
            <td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd HH:mm')}"></td>
            <!-- 三运运算判断是否已婚-->
            <td th:text="${user.isMarry}?'':''"></td>
            <td th:text="${user.price}"></td>
        </tr>
        </tbody>
    

    条件判断

    th:if

    很多时候只有在满⾜某个条件时,才将⼀个模板⽚段显示在结果中,否则不进行显示。比如只有当用户有订单时,才为它显示订单链接,否则不显示。th:if 属性用于满足这个需求:

    <body>
    <!--if属性结果为 true,模板会进行显示-->
    <p th:if="true">th:if="true"</p>
    <!--if属性结果为 false,模板不会进行显示-->
    <p th:if="false">th:if="false"</p>
     
    <!--后台控制器传出数据:model.addAttribute("isMarry", true);-->
    <p th:if="${isMarry}">已婚</p>
    </body>
    

    在这里插入图片描述
    th:if 属性不仅只以布尔值作为判断条件,它将按照如下规则判定指定的表达式结果为 true:

    1)如果表达式结果为布尔值,则为 true 或者 false
    2)如果表达式的值为 null,th:if 将判定此表达式为 false
    3)如果值是数字,为 0 时,判断为 false;不为零时,判定为 true
    4)如果 value 是 String,值为 “false”、“off”、“no” 时,判定为 false,否则判断为 true,字符串为空时,也判断为 true
    5)如果值不是布尔值,数字,字符或字符串的其它对象,只要不为 null,则判断为 true

    <body>
    <!--表达式的结果为布尔类型时,if 直接以它为结果-->
    <p th:if="true">th:if="true"</p>
    <!--当表达式结果为null时,则if判定为false-->
    <p th:if="null">th:if="null"</p>
    <!--表达式为数字时,不为0,if判定为true,为0,时,if判定为false-->
    <p th:if="11">th:if="11"</p>
    <p th:if="0">th:if="0"</p>
     
    <!--表达式结果为字符串时,如果为 true,则if判定为true;值为 false,则if判定为false-->
    <!--结果为 off、no 等特殊字符串时,if 判定为false-->
    <p th:if="'true'">th:if="'true'"</p>
    <p th:if="'false'">th:if="'false'"</p>
    <p th:if="'off'">th:if="'off'"</p>
    <p th:if="'no'">th:if="'no'"</p>
    <!--表达式结果字符串不为false,off,no时,if判定为true-->
    <p th:if="'Love China'">th:if="'Love China'"</p>
     
    <!--后台传输:model.addAttribute("userList", User.getUsers());-->
    <!--只要 userList 不等于null,则if判定为true,否则为false-->
    <p th:if="${userList}">th:if="${userList}"</p>
     
    <!--后台传输:model.addAttribute("name", "");-->
    <!--字符串为空时,if判定为 true-->
    <p th:if="${name}eq''">name 等于空</p>
    <p th:if="${name}">th:if="${name}"</p>
    </body>
    

    在这里插入图片描述

    th:unless

    th:unless 是 th:if 的反向属性,它们判断的规则一致,只是 if 当结果为true 时进行显示,unless 当结果为 false进行显示。

    <body>
    <!--unless与if判定规则一致,但是显示条件相反,unless当结果为false时才进行显示-->
    <p th:unless="false">th:unless="false"</p>
    <p th:unless="true">th:unless="true"</p>
     
    <!--后台传输:model.addAttribute("isMarry", true);-->
    <p th:if="${isMarry}">已婚1</p>
    <p th:unless="!${isMarry}">已婚2</p>
    </body>
    

    在这里插入图片描述

    th:switch

    th:switch / th:case 与 Java 中的 switch 语句等效,有条件地显示匹配的内容。

    只要其中⼀个 th:case 的值为 true,则同⼀个 switch 语句中的其他 th:case 属性都将被视为 false。当有多个 case 的值为 true 时,则只取第一个。

    switch 语句的 default 选项指定为 th:case =“*”,即当没有 case 的值为 true 时,将显示default 的内容,如果有多个 default ,则只取第一个。

    <body>
    <!--数字类型,匹配其中第一个 case 后,其它的 case 都将视为 false-->
    <div th:switch="1">
        <p th:case="0">管理员</p>
        <p th:case="1">操作员</p>
        <p th:case="*">未知用户</p>
    </div>
     
    <!--数字类型:当没有 case 匹配时,取默认值,当有多个匹配,只取第一个-->
    <div th:switch="-1">
        <p th:case="0">管理员</p>
        <p th:case="*">操作员</p>
        <p th:case="*">未知用户</p>
    </div>
     
    <!--布尔类型,多个case满足时,只取第一个-->
    <div th:switch="true">
        <p th:case="true">已婚</p>
        <p th:case="true">已成年</p>
        <p th:case="false">未婚</p>
    </div>
     
    <!--字符串类型-->
    <div th:switch="'For China'">
        <p th:case="'For USA'">美国</p>
        <p th:case="'For UK'">英国</p>
        <p th:case="'For China'">中国</p>
        <p th:case="*">未知国籍</p>
    </div>
    </body>
    

    在这里插入图片描述

    展开全文
  • th:each="user:${users}不显示内容 检查: .html文件中的users是否和Controller文件对应(users) <h4 th:text="${user}" th:each="user,userStat:${users}"></h4> @RequestMapping("/success") ...

    th:each="user:${users}不显示内容

    检查:

    .html文件中的users是否和Controller文件对应(users)

    <h4 th:text="${user}" th:each="user,userStat:${users}"></h4>
    
        @RequestMapping("/success")
        public String success(Map<String,Object> map){
            map.put("users", Arrays.asList("zhangsan","lisi","wangwu"));
            return "success";
        }
    

    在这里插入图片描述

    展开全文
  • 文章目录th:attr 的使用th:href URL链接中传参th:insert 、th:replace、th:include 代码片段引入时传参th:inline 内联th:inline="text" 文本内联th:inline="javascript" 脚本内联th:inline="none" 禁止内联 th:attr ...

    1、表达式

    1.1、简单表达式

    ${...} 变量表达式
    *{...} 选择变量表达式
    #{...} 消息表达式
    @{...} 链接url表达式

    1.2、三元运算、条件表达式:

    a? b:c   # 如果a为true,则输出b,否则输入c。     相当于 (if  else) 
    a? b     # 如果a为true,则输出b,否则输入'' 。   相当于 a? b:''
    

    示例:

    Controller :

    @RequestMapping("/thymeleaf")
    public String thymeleaf(ModelMap map) {
        map.put("name", "zhangsan");    
        return "/grammar/thymeleaf";
    }
    

    html:

    <h3> 条件表达式语法</h3>
    <div >
        1. <span th:text="${name}"></span ><br>
        2. <span th:text="${name} ? ${name}+'学习好':'李四体育好 '"></span ><br>
        3. <span th:text="${name} ? ${name}+'学习好' "></span ><br>
        4. <span th:text="${name2} ? '李四体育好 '"></span ><br>
    </div>
    

    运行结果:
    在这里插入图片描述

    说明:
    第2个表达式: name不为空时,即是true,则输出第一个值 zhangsan学习好
    第3个表达式: name不为空时,即是true,则输出第一个值 zhangsan学习好
    第4个表达式: name2不存在,即是false,则输出 ' ',即空。
    从第2与第4 可以看出 a? b 相当于 a? b:''

    解析后的 html 代码:

    <h3> 条件表达式语法</h3>
    <div >
        1. <span>zhangsan</span ><br>
        2. <span>zhangsan学习好</span ><br>
        3. <span>zhangsan学习好</span ><br>
        4. <span></span ><br>
    </div>
    

    1.3、默认表达式

    当我们取一个值,可能为空时,我们可以提前设置一个默认值 。

    语法:
    ?: b 相当于 ${a} ? ${a}:b

    如果 a不为空时,输出a的值,否则输入b的值。

    示例:

    Controller :

    @RequestMapping("/thymeleaf")
    public String thymeleaf(ModelMap map) {
        map.put("name", "zhangsan");    
        return "/grammar/thymeleaf";
    }
    

    html:

    <h3> th:text 默认值</h3>
    <div >
        <div th:text="${name ?: '李四'}"></div >
        <div th:text="${name2 ?: '李四'}"></div >
    </div>
    

    说明:
    已经设置了name 为 zhangsan,则第一个表达式,输出zhangsan 。
    第2个表达式,name2不存在,为空,则输入默认值李四

    运行结果:
    在这里插入图片描述

    解析后的html 代码:

    <h3> th:text 默认值</h3>
    <div >
        <div>zhangsan</div >
        <div>李四</div >
    </div>
    

    1.4、综合使用,属性值的 if - else

    html 静态页面如下:

    <li> <a href="javascript:void(0)" > <span> 菜单AAAA</span>  </a> </li>
    <li> <a href="/elements.html" class="multitabs" > <span> 菜单BBBB</span>  </a> </li>
    

    改造说明: items 是一个内含多个 item对象的集合, item 有url、icon、text 等属性值。
    当 url 为空时,href 值设为空方法,即 javascript:void(0) ,没有 class 属性;
    当 url 有值时,href 设为对应的值,并且增加 class="multitabs" 属性值 。

    使用 thymeleaf 如下(部分代码):

    <li  th:each="item,stat : ${items}" >
    	<a th:href="${item.url==''} ? 'javascript:void(0)':${item.url}" th:class="${item.url !=''}? 'multitabs'">
    		<span th:text="${item.text}" ></span>
    	</a> 
    <li>
    

    说明: 使用条件表达式的方法实现的 if-else 条件输出。

    2、字符串连接、拼接

    字符串连接有两种方式 :

    • 通过 ' '+ 拼接字符串 ;
    • | | 拼接字符串(推荐);

    示例1
    html 代码:

    变量:[[${hello}]]
    
    <!-- 通过 '' 和 + 拼接字符串 -->
    <div th:text="'哈哈,'+${hello}+''+${name}+''" ></div>
    
    <!-- 通过 | | 拼接字符串(推荐) -->
    <div th:text="|哈哈,${hello},${name}!|" ></div>
    

    运行结果:
    在这里插入图片描述
    解析后的html 代码:

    变量:hello world
    
    <!-- 通过 '' 和 + 拼接字符串 -->
    <div >哈哈,hello world,张三!</div>
    
    <!-- 通过 | | 拼接字符串(推荐) -->
    <div >哈哈,hello world,张三!</div>
    

    示例2:

    <!-- 通过 '' 和 + 拼接字符串 -->
    <a href="javascript:void(0)" th:onclick=" 'javascript:permission_audit('+ ${id} +') '">通过</a>
    
    <!-- 通过 | | 拼接字符串(推荐) -->
    <a href="javascript:void(0)" th:onclick="|javascript:permission_audit(${id})|">通过</a>
    

    解析后的代码:

    <a href="javascript:void(0)" onclick="javascript:permission_audit(12) ">通过</a>
    <a href="javascript:void(0)" onclick="javascript:permission_audit(12)">通过</a>
    

    3、th:attr 的使用

    th:attr 的用处就是把数据以属性值的保存起来。

    多个属性时,请逗号(,)的方式分割。格式如下:

    th:attr="attr1=${value1}, attr2=${value2}"
    

    说明:
    th:attr 标签定义多个属性的使用方式已经过时了,不推荐使用。推荐的方式:

    attr1="${value1}"  attr2="${value2}"
    

    示例1:

    @RequestMapping("/thymeleaf")
    public String thymeleaf(ModelMap map) {
    
        map.put("cityName", "北京");
        map.put("cityId", "00001");
        map.put("regionId", "010");
        
        map.put("title", "这是一张图片哦");
        map.put("logo", "风景图");
        
        return "/grammar/thymeleaf";
    }
    

    html:

    <h3> th:attr </h3>
        
    <div id="cityBtn" class="btn" th:attr="data-cityId=${cityId}, data-regionId=${regionId}" th:text="${cityName}" >上海
        <span class="fa fa-angle-down"></span>
    </div>
    

    运行结果:
    在这里插入图片描述

    解析后的代码:

    <h3> th:attr </h3>
        
    <div id="cityBtn" class="btn" data-cityId="00001" data-regionId="010" >北京</div>
    

    说明:

    可以看到数据以标签属性的方式保存起来。

    示例2:

    <img  src="../../images/ccc.jpg" 
    	  th:attr="src=@{/images/ccc.jpg},title=${title},alt=${logo},myName=${logo}" />
    

    运行结果:
    在这里插入图片描述

    解析后的代码:

    <img  src="/images/ccc.jpg" title="这是一张图片哦" alt="风景图" myName="风景图" />  
    

    4、th:href URL链接中传参

    url 的参数 写在 括号内,多个参数时,用逗号分割。

    示例:

    Controller :

    @RequestMapping("/thymeleaf")
    public String thymeleaf(ModelMap map) {  
    
        map.put("id", "12");
        map.put("name", "zhangsan");
    
        return "/grammar/thymeleaf";
    }
    

    html:

    <h3> 在 th:href url 中实现参数传递 </h3>
    
    <a th:href="@{/show( id=${id } ,name=${name} )}">相对路径-传参</a>
    

    运行结果:
    在这里插入图片描述

    解析后的代码:

    多个参数时,用逗号分割

    <h3> 在 url 中实现参数传递 </h3>
    
    <a href="/show?id=12&amp;name=zhangsan">相对路径-传参</a>
    

    5、th:insert 、th:replace、th:include 代码片段引入时传参

    Controller :

    @RequestMapping("/contentPage2")
    public String contentPage2(ModelMap map) {
        map.put("varA", "aaaaaa");
        map.put("varB", "bbbbbbb");
        return "/fragments/contentPage2";
    }
    

    html:
    /fragments/pagefrag3.html 代码片段:

    <div th:fragment="frag (varC,varD)">
        <p th:text="${varC} + ' - ' + ${varD}">...</p>
    </div>
    

    contentPage2.html :

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>thymleaf th:include 传参</title>
    </head>
    <body>
    
    <div th:include="fragments/pagefrag3::frag(${varA},${varB})">...</div>
    
    <div th:include="fragments/pagefrag3::frag(varC=${varA},varD=${varB})">...</div>
    </body>
    </html>
    

    运行结果:
    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>thymleaf th:include 传参 </title>
    </head>
    <body>
    
    <div>
        <p>aaaaaa - bbbbbbb</p>
    </div>
    
    <div>
        <p>bbbbbbb - aaaaaa</p>
    </div>
    
    </body>
    </html>
    

    对于 th:include="fragments/pagefrag3::frag(varC=${varA},varD=${varB}) 指定参数名的方式时,

    • 代码片段中也有对应的参数名,否则报错;
    • 代码片段中是按照参数名的顺序来的, 无关主页面与代码片段指定的参数名是否一致。

    6、th:inline 内联

    虽然通过Thymeleaf标准⽅⾔中的标签属性已经⼏乎满⾜了我们开发中的
    所有需求,但是有些情况下我们更喜欢将表达式直接写⼊我们的HTML⽂
    本。 例如,我们喜欢这样写代码:

    <p>Hello, [[${session.user.name}]]!</p>
    

    ⽽不喜欢这样写代码:

    <p>Hello, <span th:text="${session.user.name}">Sebastian</
    span>!</p>
    

    [[...]][(...)] 中的表达式被认为是在Thymeleaf中内联的表达式。

    thymeleaf 在html标签内可通过th标签加${}表达式访问model里的对象数据。

    但如果不想通过th标签,而是简单地访问model对象数据,或是想在 javascript代码块里访问model中的数据,则要使用内联的方法。

    th:inline 内联的取值有三种:text、javascript、 none

    使用方式:

    [[${ 变量名 }]]

    7.1、th:inline=“text” 文本内联

    Controller

    @RequestMapping("/thymeleaf")
    public String thymeleaf(ModelMap map) {        
    
        map.put("id", "12");
        map.put("name", "zhangsan");        
    
        return "/grammar/thymeleaf";
    }
    

    html:

    <p>Hello, [[${name}]]!</p>
    

    运行结果:
    在这里插入图片描述

    解析后的代码:

    <h3>th:inline 内联</h3>
    <p>Hello, zhangsan!</p>
    

    约等于 th:tex 标签:

    <p>Hello, <span th:text="${name}">Sebastian</span>!</p>
    

    解析事的代码是

    <p>Hello, <span>zhangsan</span>!</p>
    

    7.2、th:inline=“javascript” 脚本内联

    如果想在javascript中 获取 变量值时,则需要加上th:inline="javascript"

    <script type="text/javascript" th:inline="javascript">	
        var max =  [[${name}]];
        console.log(max); 
    </script>
    

    注意:

    由于thymeleaf 的版本不同,有时变量外层要加引号(单引号,双引号都可以),即var max = "[[${name}]]"

    7.3、th:inline=“none” 禁止内联

    因为内联的表达式是双层中括号 [[${ 变量名 }]] , 当使用数组、二维数组时,就会与thymleaf 语法冲突,如果还想使用数据,此时必须禁止内联 h:inline="none",才使用常规的 javascript语法。

    <input type="text" id="maxSumOfDateInYear" value="aaaaaaaaa"/>
    
    <script type="text/javascript" th:inline="none">
        var max = document.getElementById("maxSumOfDateInYear").value;
        var data = [["2012-05-07", 6], ["2012-04-16", 4]];
        console.log(max);
        console.log(data);
    </script>
    

    此处,data表示二维数组,如果不禁止内联时,模板解析会出错的,所有要加上`th:inline=“none”,禁止使用 thymeleaf 语法,使用常规的 javascript 。

    7、th:each 循环

    th:each 迭代的同时,我们也可以获取迭代的状态对象 stat

    stat 对象包 含以下属性:

    • index,从0开始的角标
    • count,元素的个数,从1开始
    • size,总元素个数
    • current,当前遍历到的元素
    • even/odd,返回是否为奇偶,boolean值
    • first/last,返回是否为第一或最后,boolean值

    controller

    @RequestMapping("/thymeleaf")
    public String thymeleaf(ModelMap map) {        
         List list=new ArrayList();
         list.add(new User(10,"张三",20,"北京"));
         list.add(new User(25,"李四",34,"上海"));
         list.add(new User(28,"王五",56,"深圳"));
         list.add(new User(32,"赵六",66,"广州"));
         
         map.put("userList", list);
         return "/grammar/thymeleaf";
    }
    
    
    class User{    	
       	private int id;
       	private String name;
       	private int age;
       	private String address;	
    	
    	public User(int id, String name, int age, String address) {
    		super();
    		this.id = id;
    		this.name = name;
    		this.age = age;
    		this.address = address;
    	}
    	// setter/getter 省略
    }
    

    html :

    <h3> th:each 循环</h3>
    <div th:each="user,stat  : ${userList}">
        <span th:text="${stat.index}">index</span>
        <span th:text="${user.name}">name</span>
        <span th:text="${user.age}">age</span>
        <span th:text="${user.address}">address</span>
        <span th:if="${stat.even}">奇行</span>
        <span th:if="${stat.odd}">偶行</span>
        <span th:if="${stat.first}">第一行</span>
        <span th:if="${stat.last}">最后一行</span>
    </div>
    

    运行结果:
    在这里插入图片描述

    解析后的代码:

    <h3> th:each 循环</h3>
    h3> th:each 循环</h3>
    <div>
        <span>0</span>
        <span>张三</span>
        <span>20</span>
        <span>北京</span>    
        <span>偶行</span>
        <span>第一行</span>    
    </div>
    <div>
        <span>1</span>
        <span>李四</span>
        <span>34</span>
        <span>上海</span>
        <span>奇行</span>    
        
    </div>
    <div>
        <span>2</span>
        <span>王五</span>
        <span>56</span>
        <span>深圳</span>    
        <span>偶行</span>
    </div>
    <div>
        <span>3</span>
        <span>赵六</span>
        <span>66</span>
        <span>广州</span>
        <span>奇行</span>    
        <span>最后一行</span>
    </div>
    

    8、th:remove 删除模板片段

    th:remove 的值如下:

    • all : 删除包含标签和所有的孩子 ;
    • body : 不包含标记删除,但删除其所有的孩子 ;
    • tag : 包含标记的删除,但不删除它的孩子 ;
    • all-but-first : 删除所有包含标签的孩子,除了第一个 ;
    • none :什么也不做。这个值是有用的动态评估 。

    示例1

    Controller

    @RequestMapping("/thymeleaf")
    public String thymeleaf(ModelMap map) {  
        map.put("id", "12"); 
        return "/grammar/thymeleaf";
    }
    

    html:

    <h3> th:remove </h3>
    <div >
    	all:<div th:remove="all"><div id="hello">你好11</div></div>
    	body:<div th:remove="body"><div id="hello">你好11</div></div>
    	tag:<div th:remove="tag"><div id="hello">你好11</div></div>
    	tag:<div th:remove="none"><div id="hello">你好11</div></div>
    	
    </div>
    

    运行结果:
    在这里插入图片描述

    解析后的代码:

    <h3> th:remove </h3>
    <div >
    	all:
    	body:<div></div>
    	tag:<div id="hello">你好33</div>
    	tag:<div><div id="hello">你好44</div></div>
    	
    </div>
    

    示例2、th:remove 支持条件表达式

    <h3> th:remove 支持条件表达式 </h3>
    <div >
    	<!-- 表达式1与表达式2效果 一样的 -->	
    	表达式1:<div th:remove="${id}==12 ? tag"><div id="hello">你好11</div></div>
    	表达式2:<div th:remove="${id}==12 ? tag:none"><div id="hello">你好22</div></div>
    	
    	<!-- 表达式3: id==12时,返回body,即删除子标签的内容-->
    	表达式3:<div th:remove="${id}==12 ? body:tag"><div id="hello">你好33</div></div>
    </div>
    

    说明:
    表达式1与表达式2效果 是一样的。id=12时,返回tag, 否则,返回’’ ,即为none 。
    表达式3:id==12 时,返回body,即删除子标签的内容;id不等于12时,返回tag,删除当前标签。

    运行结果:
    在这里插入图片描述

    解析后的代码:

    <h3> th:remove 支持条件表达式 </h3>
    <div >
    	<!-- 表达式1与表达式2效果 一样的 -->	
    	表达式1:<div id="hello">你好11</div>
    	表达式2:<div id="hello">你好22</div>
    	
    	<!-- 表达式3: id==12时,返回body,即删除子标签的内容-->
    	表达式3:<div></div>
    </div>
    

    9、th:with 定义局部变量

    9.1、th:with 定义一个局部变量

    thymeleaf - html:

    <div th:with="hello2=${name}+',你好' ">
    	<div id="hello"  th:text="${hello2}"></div>
    </div>
    

    解析后的代码:

    <div>
    	<div id="hello">zhangsan,你好</div>
    </div>
    

    9.2、th:with 定义的局部变量有是作用范围的

    th:with 定义的局部变量有作用范围的, 作用域限定于子标签以内。

    thymeleaf - html:

    <div th:with="hello2=${name}+',你好' ">
    	<div id="hello"  th:text="${hello2}"></div>
    </div>
    <div id="hello"  th:text="${hello2}"></div>
    

    解析后的代码:

    <div>
    	<div id="hello">zhangsan,你好</div>
    </div>
    <div id="hello"></div>
    

    说明:
    hello2 在作用域外使用,没有任何输出,为空的。

    9.3、th:with 一次性定义多个变量

    一次性定义多个变量,用逗号分割。

    thymeleaf - html:

    <div th:with="hello2=${name}+',你好',cityName2=${cityName}+',真美丽' ">
    	<div  th:text="${hello2}"></div>
    	<div  th:text="${cityName2}"></div>
    </div>
    

    解析后的代码:

    <div>
    	<div>zhangsan,你好</div>
    	<div>北京,真美丽</div>
    </div>
    

    9.4、th:with 定义的变量可以复用

    h:with 定义的变量可以复用,但必须在作用域内。

    thymeleaf - html:

    <div th:with="cityName2=${cityName}+',真美丽' , myDream=${cityName2}+',我真的好想去' ">
    	<div  th:text="${myDream}"></div>
    </div>
    

    解析后的代码:

    <div>
    	<div>北京,真美丽,我真的好想去</div>
    </div>
    

    说明:
    myDream 复用了 cityName2 的值。

    10、th:block 空标签,标签本身不显示

    <th:block> </th:block>是 Thymeleaf 提供的唯一的一个Thymeleaf块级元素,其特殊性在于Thymeleaf模板引擎在处理 <th:block> 的时候会删掉它本身,标签本身不显示,而保留其内容,应用场景主要有如下两个:

    10.1、同时控制相连两个标签是否显示

    如下代码:

    <div id="div1" th:if="...">
    </div>
    <div id="div2" th:if="...">
    </div>
    

    div1 和 div2 中两个if条件一样时,可以改成如下写法:

    <th:block th:if="...">
    	<div id="div1">
    	</div>
    	<div id="div2">
    	</div>
    </th:block>
    

    示例:

    thymeleaf - html:

    <th:block th:if="${id}==12">
    	<div id="div1">
    		张三的新增权限
    	</div>
    	<div id="div2">
    		张三的删除权限
    	</div>
    </th:block>
    

    解析后的代码:

    	<div id="div1">
    		张三的新增权限
    	</div>
    	<div id="div2">
    		张三的删除权限
    	</div>
    

    10.2、循环同级标签

    比如在表格中需要使用 th:each 循环 两个 tr,在不知道 th:block 标签时,可能会用 th:each 配合 th:if 使用,但是使用 th:block 就简单了,如下:

    <table>
    	<th:block th:each="...">
    		<tr>...</tr>
    		<tr>...</tr>
    	</th:block>
    </table>
    

    10.3、用于占位符

    Controller :

     @RequestMapping("/main")
    public String main(ModelMap map) {
    	return "/fragments5/main";
    }
    

    模板代码片段 base.html :

    <head th:fragment="common_header(title,links)">
    <title th:replace="${title}">The awesome application</title>
    
    	<!-- 共用的css和js -->
      <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
      <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
      <script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>
    
    	<!-- 额外添加的链接 -->
      <th:block th:replace="${links}" />
      
    </head>
    

    主页面 main.html

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head th:replace="/fragments5/base :: common_header(~{::title},~{::link})">
      <title>Main页面</title>
      <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
      <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
    </head>
    <body>
    
    <h1>th:replace</h1>
    
    </body>
    </html>
    

    运行结果:
    在这里插入图片描述

    解析后的代码:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Main页面</title>
    
    	<!-- 共用的css和js -->
      <link rel="stylesheet" type="text/css" media="all" href="/css/awesomeapp.css">
      <link rel="shortcut icon" href="/images/favicon.ico">
      <script type="text/javascript" src="/sh/scripts/codebase.js"></script>
    
    	<!-- 额外添加的链接 -->
      <link rel="stylesheet" href="/css/bootstrap.min.css"><link rel="stylesheet" href="/themes/smoothness/jquery-ui.css">
      
    </head>
    <body>
    
    <h1>th:replace</h1>
    
    </body>
    </html>
    

    具体参考文章:
    https://blog.csdn.net/xiaojin21cen/article/details/102919572

    11、th:if 条件判断

    11.1、th:if 多条件判断,使用 &&||

    <ul class="nav nav-second-level">
       <li th:each="cmenu : ${menu.children}">
           <a class="J_menuItem"  th:if="${cmenu.text!= '角色管理' && cmenu.text!= '系统菜单'}"
               href="graph_echarts.html" th:text="${cmenu.text}"
               th:href="${cmenu.attributes.url}">系统管理</a>
       </li>
    </ul>
    

    11.2、if elseif else 即 th:switch th:case

    如果要实现if elseif else 判断表达式,在thymeleaf要使用 th:switch 代替,th:case="*" 表示默认,需写在最后

    <div class="top" th:switch="${area}">
       <div class="logo" th:case="'a'">
           <img th:src="@{/static/images/logo-A.png}">
       </div>
       <div class="logo" th:case="'b'">
           <img th:src="@{/static/images/logo-B.png}">
       </div>
       <div class="logo" th:case="*">
           <img th:src="@{/static/images/logo-c.png}">
       </div>
    </div>
    

    注意:th:case 所在的标签必须在 th:switch 所在标签的里面。

    展开全文
  • 一、th:if gt: great than(大于)> ge: great equal(大于等于)>= eq: equal(等于)== lt: less than(小于)< le: less equal(小于等于)<= ne: not equal(不等于)!= 写法如下,其它写法...

    最近使用若依,对前端的thymeleaf语法不是很熟悉,下面是自己的笔记,大神请忽略。 

    一、th:if 

    gt:     great than(大于)>
    ge:    great equal(大于等于)>=
    eq:    equal(等于)==
    lt:    less than(小于)<
    le:    less equal(小于等于)<=
    ne:    not equal(不等于)!=

    写法如下,其它写法类似。 

    <div th:if="${substringName} ne null"></div>

    th:if多条件判断 :

    <div th:if="(${t.pid}==${s.id}) and ${t.recycle!=1}"></div>

    二、th:each 

    (1)页面:

    <tr th:each="userStat : ${list}">
                    <td th:text="${userStat.substringName}"></td>
                    <td id="ids" th:value="${userStat.id}" ></td>
    </tr>

     后台:

    List list = new ArrayList();
    HashMap<Object, Object> objectObjectHashMap = new HashMap<>();
    objectObjectHashMap.put("id", value.getId());
    objectObjectHashMap.put("substringName", substringName);
    objectObjectHashMap.put("returnContractPath", returnContractPath());
    list.add(objectObjectHashMap);
    map.put("list",list);

     (2)下拉框传值问题:

    <!-- th:text 为显示的值,th:value 为实际传值 -->
    <select name="contactsId" class="form-control" id="contactsId" required>
                 <option value="">请选择联系人</option>
                 <option th:each="list:${sysContacts}" th:value="${list.id}"
                       th:text="${list.contactName}"></option>
    </select>

     三、js中引用thymeleaf

    <!-- 注意标签 -->
    <script th:inline="javascript"> 
        var editFlag = [[${@permission.hasPermi('system:quotation:edit')}]];
        var checkFlag = [[${@permission.hasPermi('system:quotation:check')}]];
    </script>

     四、th:href多参数

    <a th:href="@{'/system/business/downloadFail?failName='+${userStat.substringName}+'&returnContractPath='+${userStat.returnContractPath}}">
    <input type="button" class="btn-xs btn-info" style="width: 40px" value="下载"/>
    </a>

    五、th:onclick多参数

    <a href="#" th:onclick="removeFile([[${userStat.id}]],[[${userStat.returnContractPath}]]);">
    <input type="button" class="btn btn-danger btn-xs" style="width: 40px" value="删除"/>
    </a>

     js代码:

     function removeFile(userStatId,returnContractPath) {
            var formData = new FormData();
            formData.append("id",userStatId);
            formData.append("returnContractPath",returnContractPath);
            $.ajax({
                url: prefix + "/removeFail",
                type: 'post',
                async: false,
                data: formData,
                processData: false,
                contentType: false,
                success: function(result) {
                    $.operate.successCallback(result);
                },
            })
        }

    六、 th:src 图片引用

    <!-- 如果引用的图片来自线上,直接赋值即可: -->
    <img src="https://baidu.com/xxx.jpg">
    
    <!-- 如果是静态赋值,写法上略有不同: -->
    <img  th:src="@{../img/001.jpg}">
    
    <!-- 如果是动态赋值,前端代码  -->
    <img src="" id="weather-icon">
    
    <!-- js 代码: -->
    $("#weather-icon").attr("src","/weatherforecast/assets/weatherIcon/100.png");

    先写这么多, 后续待补充。。。

     

    展开全文
  • th:each 循环迭代 循环基本用法 获取迭代状态 条件判断 th:if th:unless th:switch th:each 循环迭代 循环基本用法 1、对于信息页面,数据格式是一样时,页面通常都是循环迭代它们,写过 JSP 的 JSTL 的就...
  • 直接下面这样用会报错: th:each="i:${#numbers.sequence(1,${totalPage})}" 应该把里面的括号去掉,就能用了: th:each="i:${#numbers.sequence(1,totalPage)}
  • Thymeleaf中"th:each""th:if"的用法解析

    千次阅读 2019-11-14 23:45:37
    "th:each"用于迭代遍历 <table> <thead> <tr> <th>序号</th> <th>用户名</th> <th>密码</th> ...
  • 1. th:each 遍历 <!-- 遍历集合,如果被遍历的变量 userList 为 null 或者不存在,则不会进行遍历,也不报错--> <tr th:each="user : ${userList}"> <!-- 将用户的主键 uId 存在在 name 属性中--&...
  • thymeleaf 如何用th:each 做条件遍历

    千次阅读 2020-03-30 13:35:15
    } } 步骤 5 : 普通遍历 使用 th:each 遍历  class="showing"> 遍历h2> <table> <thead> <tr> <th>idth> <th>产品名称th> <th>价格th> tr> thead> <tbody>  th:each="p: ${ps}">  th:text="${p.id}">td>  th:...
  • <div th:each="items : ${form.openingAreaSelect}" > <h5 th:text="${items.key}"> <h5 th:text="${items.value}"> <h5 th:text="${items.last}"> ``` 正常theach LIST的话可以items.key,items....
  • !... 代码如下 ... <ul th:each="m:${modules}"> ... <li th:each="rm:${roleModuleVo.modules}">...th:each遍历取值 为什么取了多遍 这两个th:each标签怎么放 放在哪 放的顺序 我一个小白已经放了很多次不同的地方。
  • th:each

    千次阅读 2018-05-04 15:41:42
    循环加判断:做权限时,菜单动态展示,所以前台的样式中进入默认选中没...li th:each="permissions,iterStat:${permissions}" &gt;    &lt;a th:attr="data-href=@{${permissions.action...
  • Thymeleaf中的th:each

    2020-02-13 20:24:46
    Thymeleaf中的th:each 今天在学习thymeleaf时,发现自己对一直在用的th:each好像了解的不够透彻,以至于在看到下面的这句话的时候居然没有看懂,当时就被卡在了这个count上,于是想写一篇博客记录一下。 <tr ...
  • th:each="device : ${devices}" th:text="${ '编号:' + device.deviceSerial + '      设备名:' + device.deviceName}" th:attr="value=${device}"> layui....
  • thymeleaf 的 th:each 标签示例

    千次阅读 2020-11-09 11:05:04
    页面: <tr> 编号</td> 姓名</td> 年龄</td> <td>index</td> <td>count</td> <td>size</td> <td>current</td> <td>first</td> <td>last</td> </tr> <tr th:each="user,iterStat:${userList}"> <td th:text="${user....
  • 代替之前的拼接 与EL表达式$ 符号冲突 `${name}` 在模板字符串里,这样用$取值会出问题,需要用\${} th:each在模板字符串里不生效 在正常的页面中,使用th:each 选择... controller传值 model.addAttribute("labels...
  • } } th:each="user, userStat : ${userList}" 中的 ${userList} 是后台传过来的集合 ◼ user:定义变量,去接收遍历${userList}集合中的一个数据 ◼ userStat:${userList} 循环体的信息 ◼ 其中 user 及 userStat ...
  • 1、 获取th:each 索引值 两种写法 ①、 th:each="user,userStat:${userList}" th:if="${userStat.index}" ②、 th:each="user:${userList}" th:if="${userStat.index}" userStat是状态变量,有 index,count,size...
  • Thymeleaf——th:each遍历Map List

    万次阅读 2018-12-29 10:02:47
    each = " userEntry,userStat:${userMap} " > < td th: text = " ${userStat.index} " > td > < td th: text = " ${userStat} " > td > < td th: text = " ${userEntry} " > td > < td...
  • <select id="platformId" name="platformId"> <option value="">合作平台</option> <option th:selected="${... th:each="cooperationPlatformDO : ${cooperationPlatformDOList}" .
  • thymeleaf的th:each如何跳出本次循环 类似于js中的 ``` for(var i=0;i;i++){ if(arr[i]==3){ break;//类似于这种 } } ```
  • div class="item active" th:if="${iterStat.index==0}" th:each="img,iterStat:${pics}">  <img th:src="${img.path}" style="width: 303px;height: 171px;"/> </div> 其中iterStat 为获取当前...
  • thymeleaf的th:each的使用 文章目录thymeleaf的th:each的使用一、Demo描述二、如何“动态”拼接字符串1、获取状态变量2、如何拼接字符串三、参考文档 一、Demo描述 ​ 如何利用th:each,在数据库中没有存放个人用户...
  • thymeleaf的th:each常见用法

    千次阅读 2019-12-15 09:30:48
    thymeleaf的th:each常见用法 一.th:eath迭代集合用法: <table border="1" id="stuTable"> <tr> <td>是否选中</td> <td>编号</td> <td>姓名</td> ...
  • <... 命名空间:th: --> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <b
  • 后台是这个亚子: 但是页面上是木有数据滴,实现找不到找不到原因在哪
  • thymeleaf实现th:each双重多重嵌套使用

    万次阅读 2019-08-23 11:28:11
    博主最近在做一个个人的博客网站,准备用 thymeleaf 实现一个动态加载一二级文章分类的功能,效果如下: 后台实体类代码如下: /** * ...所以,我们可以继续 th:each 遍历该一级分类的二级分类列表,三级四级以此类推。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 163,810
精华内容 65,524
关键字:

th:each