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>

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

技术闲聊DD

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值