thymeleaf语法

thymeleaf模版语法和其他模版引擎模版语法蛮相似，都有循环、判断、表达式、日期处理等等

一：访问map中的数据

@RequestMapping ( "/index" )       public  String hello(Model map){                      //map           Map<String, Object> student=  new  HashMap<>();           student.put( "name" ,  "张三丰" );           map.addAttribute( "student" ,student);                      return  "index" ;       }

< span  th:text = "${student.name}" ></ span >    字符串拼接：< h2  th:text = "'姓名：'+${student.name}" ></ h2 > 三元表达式:< input  th:value = "${age gt 30 ? '中年':'年轻'}" /> gt：great than（大于） ge：great equal（大于等于） eq：equal（等于） lt：less than（小于） le：less equal（小于等于） ne：not equal（不等于）

记住：th:text就是把数据渲染到两个标签中间 ，其中th是thymeleaf简写。

二：访问pojo中的属性

//pojo      Book book =  new  Book( "辟邪剑谱" , 199 .99f, "http://img3m6.ddimg.cn/15/16/23326296-1_w_2.jpg" );      map.addAttribute( "book" ,book);

< img  th:src = "${book.bookUrl}" /> < span  th:text = "${book.bookName}" />

记住：如果你想让标签属性值动态化，请在标签属性名前面加上th:

三：循环遍历list集合

//集合           List<Book> books =  new  ArrayList<Book>();           for  ( int  i =  0 ; i <  10 ; i++) {                Book b =  new  Book( "book" +i, 100f,  "http://www.wendaoxueyuan.com/images/" +i+ ".jpg" );                books.add(b);           }           map.addAttribute( "books" ,books);

< table  border = "1px"  cellspacing = "0px"  cellspadding = "0px"  width = "100%" >                 < tr >                          < td >编号</ td >< td >书名</ td >< td >书价格</ td >< td >图片地址</ td >                 </ tr >                 < tr  th:each = "book:${books}" >                          < td >编号</ td >                          < td  th:text = "${book.bookName}" >书名</ td >                          < td  th:text = "${book.bookPrice}" >书价格</ td >                          < td  th:text = "${book.bookUrl}" >图片地址</ td >                 </ tr >   </ table >

取循环下标：

< tr   th:each = "user,userStat : ${list}" >        < th  th:text = "${userStat.index}" >状态变量：index</ th >       < th  th:text = "${userStat.count}" >状态变量：count</ th >       < th  th:text = "${userStat.size}" >状态变量：size</ th >       < th  th:text = "${userStat.current.userName}" >状态变量：current</ th >       < th  th:text = "${userStat.even}" >状态变量：even****</ th >        < th  th:text = "${userStat.odd}" >状态变量：odd</ th >       < th  th:text = "${userStat.first}" >状态变量：first</ th >       < th  th:text = "${userStat.last}" >状态变量：last</ th >  </ tr >

说明： index：列表状态的序号，从0开始； count：列表状态的序号，从1开始； size：列表状态，列表数据条数； current：列表状态，当前数据对象 even：列表状态，是否为奇数，boolean类型 odd：列表状态，是否为偶数，boolean类型 first：列表状态，是否为第一条，boolean类型 last：列表状态，是否为最后一条，boolean类型

考考你：如果我想奇数行红色，偶数行蓝色怎么实现？不许用javascript。

提示代码：<tr th:class="${pcStatus.even?'red':'blue'}"></tr>   

四：if逻辑判断

< h1 >      < b  th:text = "${name}" ></ b >：      < span  th:if = "${age gt 30}" >中年</ span >      < span  th:unless = "${age gt 30}" >年轻</ span > </ h1 >

记住：th:if表示满足条件显示标签，th:unless表示不满足条件显示标签

五：日期处理

< span  th:text = "${#dates.format(post.postCreate,'yyyy-MM-dd')}" >2017年11月8日</ span >

将Date类型的日期对象转换成指定格式的时间字符串

六：定义片段和引用片段

定义片段：新建footer.html,并在footer.html中声明片段

< footer  th:fragment = "copy" >       < script  type = "text/javascript"  th:src = "@{/plugins/jquery/jquery-3.0.2.js}" ></ script >   </ footer >

引用片段：在index.html中引用footer片段：

<!--下面的footer是页面的名字，不是标签的名字-->    < div  th:insert = "footer::copy" ></ div >          < div  th:replace = "footer::copy" ></ div >          < div  th:include = "footer::copy" ></ div >             结果为：       < div >        < footer >           < script  type = "text/javascript"  th:src = "@{/plugins/jquery/jquery-3.0.2.js}" ></ script >        </ footer >     </ div >             < footer >      < script  type = "text/javascript"  th:src = "@{/plugins/jquery/jquery-3.0.2.js}" ></ script >   </ footer >             < div >      < script  type = "text/javascript"  th:src = "@{/plugins/jquery/jquery-3.0.2.js}" ></ script >   </ div >

说明：

• th:insert   ：保留自己的主标签，保留th:fragment的主标签。

• th:replace ：不要自己的主标签，保留th:fragment的主标签。

• th:include ：保留自己的主标签，不要th:fragment的主标签。（官方3.0后不推荐）

七：内联方式

如果不内联我们这么拼接字符串

< span  th:text = "'名字'+${stu.name}+'性别'+${stu.sex}+'年龄'+${stu.age}" ></ span >

使用内联我们就可以这么玩：

< span  th:inline = "text" >名字[[${stu.name}]]性别[[${stu.sex}]]年龄[[${stu.age}]]</ span >

一对比，发现第一种拼接起来麻烦，第二种更快捷，所以内联还是有使用场景的

注意:一定要加th:inline="text"

<script></script>标签里面不能直接写el表达式，但是很多场景我们必须要写，这个时候就必须使用内联方式

比如：

< script  th:inline = "javascript" >        alert([[${stu.name}]])   </ script >

八：内置对象

< span  th:if = "${session.name!=null}"  th:text = "'欢迎:'+${session.name}" ></ span > < span  th:id = "${session.name==null}"  th:>请登录</ span >

session就是内置对象，当然还有其他内置对象，其他内置对象请参考：http://blog.csdn.net/zsl129/article/details/53007192

九：自定义标签属性

< span  th:sex = "${stu.sex}"  th:age = "${stu.age}" ></ span >

这样写标签属性是取不到值的，你必须这么写

< main  th:attr = "sex=${stu.sex},age=${stu.age}" ></ span >