IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Thymeleaf (三) ---------Thymeleaf 属性 -> 正文阅读

[JavaScript知识库]Thymeleaf (三) ---------Thymeleaf 属性


大部分属性和 html 的一样,只不过前面加了一个 th 前缀。 加了 th 前缀的属性,是经过模版引擎处理的

一、th:action 属性

定义后台控制器的路径,类似标签的 action 属性,主要结合 URL 表达式,获取动态变量

<form id="login" th:action="@{/login}" th:method="post">......</form>

二、th:method 属性

设置请求方法

<form id="login" th:action="@{/login}" th:method="post">......</form>

三、th:href 属性

定义超链接,主要结合 URL 表达式,获取动态变量

<a th:href="@{/query/student}">相对地址没有传参数</a>

四、th:src 属性

用于外部资源引入,比如<script>标签的 src 属性,<img>标签的 src 属性,常与@{}表达式结合使用,在 SpringBoot 项目的静态资源都放到 resources 的 static 目录下,放到 static 路径下的内容,写路径时不需要写上 static

<script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>

五、th:text 属性

用于文本的显示,该属性显示的文本在标签体中,如果是文本框,数据会在文本框外显示,要想显示在文本框内,使用 th:value

<input type="text" id="realName" name="reaName" th:text="${realName}">

六、th:style 属性

设置样式

<a th:onclick="'fun('+${user.id}+')'" th:style="'color:red'">点击我</a>

七、th:each 属性

这个属性非常常用,比如从后台传来一个对象集合那么就可以使用此属性遍历输出,它与 JSTL 中的<c: forEach>类似,此属性既可以循环遍历集合,也可以循环遍历数组及 Map。

1、循环列表

List<String> userList = new ArrayList<>();
userList.add(...);
userList.add(...);

model.addAttribute("userList",uerList);
<div th:each="u:${userList}">
	<p th:text="${u.id}"></p>
	<p th:text="${u.name}"></p>
    <p th:text="${u.gender}"></p>
    <p th:text="${u.age}"></p>
</div>

语法说明 :

th:each="user, iterStat : ${userlist}" 中的 ${userList} 是后台传过来的集合

? user

定义变量,去接收遍历${userList}集合中的一个数据

? iterStat

${userList} 循环体的信息

? 其中 user 及 iterStat 自己可以随便取名

? interStat 是循环体的信息,通过该变量可以获取如下信息

  • index : 当前迭代对象的 index(从 0 开始计算)
  • count : 当前迭代对象的个数(从 1 开始计算)这两个用的较多
  • size : 被迭代对象的大小
  • current : 当前迭代变量
  • even/odd : 布尔值,当前循环是否是偶数/奇数(从 0 开始计算)
  • first : 布尔值,当前循环是否是第一个
  • last : 布尔值,当前循环是否是最后一个

注意:循环体信息 interStat 也可以不定义,则默认采用迭代变量加上 Stat 后缀,即userStat

2、遍历数组 Array

User[] userArray = new User[3];
user[0] = new User(...);
user[1] = new User(...);
user[2] = new User(...);
model.addAttribute("userArray", userArray);
<tr th:each="u:${userArray}" >
    <td th:text="${uStat.count}+'/'+${uStat.size}"></td>
    <td th:text="${u.id}"></td>
    <td th:text="${u.name}"></td>
    <td th:text="${u.sex}"></td>
    <td th:text="${u.age}"></td>
    <td th:text="${uStat.current.age}"></td>
</tr>

3、遍历 map

Map<String, String> map = new HashMap<>();
map.put("...", "...");
map.put("...", "...");

model.addAttribute("map", map);
<div th:each="m, mapStat:${map}">
	<p th:text="${mapStat.count}"></p>
	<p th:text="${m.key}"></p>
	<p th:text="${m.value}"></p>
     //如果value是对象的话
    <p th:text="${m.value.属性}"></p>
</div>

八、条件判断 if

语法:th:if=”boolean 条件” , 条件为 true 显示体内容,th:unlessth:if 的一个相反操作

<p th:if="${gender == 'male'}">
	性别是 男
</p>

<p th:if="5>0">
    5 > 0
</p>

<p th:if="${age > 50}">
    年龄大于50
</p>

<p th:if="${name}">
    name是空
</p>

九、switch 分支语句

<div th:switch="${gender}">
	<p th:case="m">显示男</p>
	<p th:case="f">显示女</p>
	<p th:case="*">未知</p>
</div>

一旦某个 case 判断值为 true,剩余的 case 则都当做 false," * "表示默认的case,前面的 case 都不匹配时候,执行默认的 case

十、 th:inline 属性

th:inline 有三个取值类型 (text, javascript 和 none)

1、内联 text

可以让 Thymeleaf 表达式不依赖于 html 标签,直接使用内敛表达式 [[表达式]] 即可获取动态数据,要求在父级标签上加 th:inline = “text”属性

<div th:inline="text">
    姓名是 [[${name}]]
</div>
<!--不用再加入 th:inline='text'-->
<div>
    性别是 [[${gender}]]
</div>

2、内联 Javascript

可以在 js 中,获取模版中的数据。

<button onclick="fun()">单击按钮</button>
<script type="text/javascript" th:inline="javascript">
	var name = [[${user.name}]];
	var gender = [[${user.gender}]];
	function fun() {
		alert("click 用户是"+name+",他的性别是"+id);
	}
</script>
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-24 00:26:06  更:2022-03-24 00:26:29 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 4:35:38-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码