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=? 的属性

Thymleaf——工作笔记本的更多相关文章

  1. 【LR】版本问题

    前台信息工作笔记本系统是: widows7 64位操作系统 (1)loadrunner11 软件 --兼容性问题的解决与环境配置要求 地址:http://bgwan.blog.163.com/blog ...

  2. Ubuntu16.04双网卡配置,内网外网同时访问

    Ubuntu16.04双网卡配置,内网外网同时访问 配置:vim/etc/network/interface auto lo iface lo inet loopback auto eno1 ifac ...

  3. Luogu P4231 三步必杀 (差分)

    目录 题目 题解 题目 题目链接 题目背景 (三)旧都 离开狭窄的洞穴,眼前豁然开朗. 天空飘着不寻常的雪花. 一反之前的幽闭,现在面对的,是繁华的街市,可以听见酒碗碰撞的声音. 这是由被人们厌恶的鬼 ...

  4. 使用Kubernetes、K3s和Traefik2进行本地开发

    作者简介 Vyacheslav,拥有运维和项目管理经验的软件工程师 这篇文章将承接我此前搭建的本地Docker开发环境,具体步骤已经放在在以下网址: https://github.com/Vorone ...

  5. 戴尔DELL P2419H显示器连接笔记本之后,笔记本的耳机不工作了

    去control panel,找到sound 在playback的tab上,重新设置default

  6. Iptables工作原理使用详解

    Iptables防火墙简介 Iptables名词和术语 Iptables工作流程 基本语法 Filter 参数说明 NAT表: Icmp协议 TCP FLAG 标记 什么是状态检测 iptables的 ...

  7. JVM 垃圾回收器工作原理及使用实例介绍(转载自IBM),直接复制粘贴,需要原文戳链接

    原文 https://www.ibm.com/developerworks/cn/java/j-lo-JVMGarbageCollection/ 再插一个关于线程和进程上下文,待判断 http://b ...

  8. 笔记本win8,mac10.10,ubuntu,android四系统安装

    前言,最简单的是win8和ubuntu 最难啃的是mac android版只是要注意一个小技巧,目前算是独创 (被android坑了一次,两块硬件,android版把500Gntfs的硬盘整个识别为一 ...

  9. 笔记本_thinkpad_e440

    ZC: 这是我现在手上 公司工作的笔记本 1.进入 BIOS --> Enter键 2.背面信息 笔记本序列号(用于查找 驱动等) (ZC: 这个是 ThinkPad E440 的信息) 序号为 ...

随机推荐

  1. Ubuntu14.04LTS下安装Node.js&NPM以及个人博客hexo的初始化配置

    什么是hexo Hexo 是一款基于node 的静态博客网站生成器作者 :tommy351是一个台湾的在校大学生...相比其他的静态网页生成器而言有着,生成静态网页最快,插件丰富(已经移植了大量Oct ...

  2. UVa225,Golygons

    刘儒家翻译的走出的图形可以自交,不知道大家是怎么理解的,反正我是认为这句话的意思是告诉我允许一个点访问多次 这样是WA的,n=15和n=16时多输出很多数据,应该是不允许自交,也就是不允许一个点访问多 ...

  3. 解读python中SocketServer源码

    在看SocketServer源码之前,先看一个例子: class Base(object): def __init__(self, name): self.name = name self.Testf ...

  4. php环境搭建工具推荐

    楼楼最近由于一系列原因,使用了几款php环境搭建工具,安装配置方便,所以在这里推荐一下.第一款是XAMPP(网址http://www.xampps.com/),软件包原来的名字是 LAMPP,但是为了 ...

  5. 【转】open参数O_DIRECT的学习

    open参数O_DIRECT的学习 使用 O_DIRECT 需要注意的地方 posix_memalign详细解释 free:这里好几个方法我都没测试成功,最后还是用posix_memalign 对齐的 ...

  6. MongoDB自动增长

    MongoDB 没有像SQL一样有自动增长的功能,如果我们需要实现ObjectId自动增长功能,可以通过编程的方式来实现.步骤如下: 1. 创建counters集合: db.createCollect ...

  7. 重温C语言小感

    这周对我感触比较大的就是重温了下C语言,当然重点还是放到了指针那块,一看到指针就想到了链表,还有那个 指针申明,“函数指针”,“指针函数”, “使用指针实现数组降维数”,还有就是大学初学编程的点滴. ...

  8. 根据文字计算出label的高度

    ios7.0之前用: [strtestsizeWithFont:ContentFontconstrainedToSize:CGSizeMake(ScreenWeight -20, 1000) line ...

  9. 2017web前端面试总结

    2017web前端面试总结 从今年3月份开始面试笔试找实习找校招到现在也半年多了,拿到了不少offer,也有了自己的一点心得体会,这里写出来分享一下,拙见勿喷. 注意一下,以下的观点仅代表我个人的体会 ...

  10. 基于Vue.js的大型报告页项目实现过程及问题总结(一)

    今年5月份的时候做了一个测评报告项目,需要在网页正常显示的同时且可打印为pdf,当时的技术方案采用jquery+template的方式,因为是固定模板所以并没有考虑报告的模块化区分,九月底产品提出新的 ...