Thymleaf——工作笔记本

Thymleaf(工作笔记本）

 1,循环遍历

th:each="li,information:${information}"

 

2，文本

 th:text="${numberOfElements}"

 

 3，带格式的文本（编辑器中的文本）

 th:utext="${numberOfElements}"

 

 4，超链接

 th:href="@{'./information'(id=${li.infoId})}"

 

 5，图片信息（地址对的时候，地址错误的时候）

 onerror="this.src='./images/spg9.png'" 

 th:src="${li.infoImg}"

 

 6，if

 if判断（如果不为空，则显示文本为text中值

 th:if="${li.user.userName!=null}" 

 th:text="${li.user.userName}"

 

 if判断（显示排序中的6条数据）

 th:if="${infomation.index<6}" 

 th:text="${li.infomation}"

 

 if判断（显示排序中的最新一条数据）

 th:if="${infomation.index==0}" 

 th:text="${li.infomation}"

 

 if判断（显示用户名，如用户名不存在，则显示未知）

     发布人：<span th:if="${li.user.userName!=null}" th:text="${li.user.userName}"></span>

             <span th:if="${li.user.userName==null}" th:text="未知">未知</span>

 

 7，轮播中的添加class属性的设置

 th:classappend="${carouselindex.index == 0}? 'active'"

 

 8，模块分离（拆分头尾、侧边栏）

 

提取的模块：

抽取到aa.html中

th:fragment="newNavbar"

th:fragment="模块名字 "

 

模块引入：

 <div th:replace="./sss/aa:: newNavbar"></div>

  <div th:replace="抽取路径+aa:: 模板名字"></div>

 

 9，迭代遍历(侧边栏拆分显示制定条数）需要用迭代器iterStat

<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'" th:if="${iterStat.index<4}">

     <td th:text="${prod.name}">Onions</td>

     <td th:text="${prod.price}">2.41</td>

     <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>

  </tr>

 

 10，添加id属性（一般用于设定锚点）

<a th:href="'#tab-'+${li.itemId}">

 

<h1 th:id="'tab-'+${li.itemId}">

 

 11,添加自动跳转锚点

<div th:title="'#slider-direction-'+${iterStat.index}">

 

<div th:id="'slider-direction-'+${iterStat.index}">

 

 12,填加不常见属性

 <div  th:attr="data-slide-to=${ carouselindex.index }">

添加后 div多了一个  data-slide-to=？ 的属性