springboot实战--Thymeleaf的使用(2)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wu2374633583/article/details/83306988

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>

还有一种比如:点击事件传递参数
这个很重要网上说的我都试了,都不行,先标记

猜你喜欢

转载自blog.csdn.net/wu2374633583/article/details/83306988