springBoot之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);

1 2	`<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表示不满足条件显示标签

五：日期处理

1	`<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片段：

<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后不推荐）

七：内联方式

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

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

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

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

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

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

比如：

<script th:inline="javascript">

alert([[${stu.name}]])

</script>

八：内置对象

1 2	`<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

九：自定义标签属性

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

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

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

springBoot之Thymeleaf语法

猜你喜欢