1. 程式人生 > >springboot實戰--Thymeleaf的使用(2)

springboot實戰--Thymeleaf的使用(2)

1 Thymeleaf基礎知識

在這裡插入圖片描述

1 引入Thymeleaf

<html xmlns:th="http://www.thymeleaf.org">

引入其他的檔案:JS CSS

<link th:href="@{css/bootstrap.css}" rel="stylesheet"/>
<script type="text/javascript" th:src="@{js/jquery-3.3.1.js}"></script>

在這裡插入圖片描述

2 訪問model中的資料資源

訪問單個物件的屬性

	<span th:text="${person.name}">aa</span>

如果動態訪問那麼後臺的name值會代替"aa",但是如果訪問靜態資源顯示的是aa

3 model中的資料迭代

訪問列表資料
each迴圈

<table class="table table-striped">
	  <tr><th>姓名</th><th>年齡</th></tr>
	  <tr th:each="person:${people}">
	  		<td th:text="${person.name}"></td>
	  		<td th:text="${person.age}"></td>
	  </tr>
	</table>

在這裡插入圖片描述

4 資料判斷

if else判斷

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

 用法:  例     th:if="${xx} lt 'x'"  <-----------> xx < x  

	  		<td th:if="${person.sex } eq 1">
	  			女
	  		</td>
	  		<!-- th:unless表示非if的 -->
	  		<td th:unless="${person.sex} eq 1">
	  			男
	  		</td>

在這裡插入圖片描述

5 switch語句


	  		<td th:switch="${person.status}">
	  			 <p th:case="a">總裁</p>
  				 <p th:case="b">經理</p>
  				 <p th:case="c">員工</p>
	  		</td>

在這裡插入圖片描述

6 if elseif else(多情況判斷)

使用三元運算子巢狀形式

<td th:text="${person.score } gt 90 ? '優秀' :(${person.score } gt 80 ?'良好':(${person.score } gt 60 ? '及格': '不及格'))"></td>

7 在JS中訪問Model物件和物件的屬性

<script  th:inline="javascript" >

	function getName(){	
		var person=[[${person}]];
		alert(person.name);
	}		
</script>

還有一種比如:點選事件傳遞引數
這個很重要網上說的我都試了,都不行,先標記