暑假第三周，thymeleaf和select标签

༄久梦༒长醉༻

已于 2022-06-26 10:11:20 修改

阅读量749

点赞数

分类专栏： html thymeleaf 文章标签：大数据

于 2022-06-26 10:10:26 首次发布

本文链接：https://blog.csdn.net/qq_63660369/article/details/125466716

版权

周记同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

4 篇文章 1 订阅

订阅专栏

thymeleaf

1 篇文章 0 订阅

订阅专栏

本文介绍了thymeleaf模板引擎的基本使用，包括变量表达式、属性选择器、链接表达式以及th属性中的th:id、th:text、th:each等。特别讨论了th:object如何在父标签选择对象，以及th:each遍历列表生成动态表单。同时，文章提及了一个关于select标签在JavaScript中的问题，即如何通过监听option标签来获取其value属性。

摘要由CSDN通过智能技术生成

thymeleaf模板引擎

themeleaf简要

thymeleaf，在前端页面中是写在html标签中的，这样可以实现静态和动态，当有数据返回html标签中时thymeleaf便会动态的替换原本的静态内容，不过themeleaf常用于前后端混合模式，前后端需要多商讨，知道数据格式。

thymeleaf基本使用方法

<h1 th:text="欢迎">欢迎静态</h1>

如上述例子，双引号内部还可以用对象，连接等

变量表达式：${...}，里面是传进来的变量

<h1 th:text="${a}">欢迎静态</h1>

也可以使用属性

<h1 th:text="${a.name}">欢迎静态</h1>

选择变量表达式：*{...}，用法和变量表达式差不多，不过在子元素使用父元素内部的属性时可以使用object属性方便引入
```
<div th:object="${a}" >
    <p th:text="*{fisrtName}">firstname</p>
</div>
```
如上可以获取a的ffirstname属性

链接表达式：@{...}配合href属性可以修改css文件路径等

<link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet">

thymeleaf th属性

在thymeleaf中还有一个th，它内部的属性的改变意味着有不同的方法，一部分与html差不多，一部分需要重点说一下

th:id 替换 HTML 的 id 属性

th:text 文本替换，转义特殊字符

th:utext 文本替换，不转义特殊字符，也就是说可以在里面写html标签

<div th:utext="'<h1>欢迎</h1>'" >欢迎你</div>

th:object 在父标签选择对象，子标签使用 *{…} 选择表达式选取值。(如上)

th:value 替换 value 属性

th:style 设置样式

th:onclick 点击事件

th:each 遍历，基本语法 th:each="obj,iterStat:${objList}"

<tr th:each="user,userStat:${userlist}" th:class="${userStat.odd}?'odd':'even'">
                <td th:text="${user.id}"></td>
                <td th:text="${user.username}"></td>
                <td th:text="${user.password}"></td>
                <td th:text="${user.petname}"></td>
</tr>

如上，它会自动遍历很多行tr，进而直接生成一个动态表单

userStat称作状态变量，其中的属性有：
index:当前迭代对象的迭代索引，从0开始，这是索引属性；
count:当前迭代对象的迭代索引，从1开始，这个是统计属性；
size:迭代变量元素的总量，这是被迭代对象的大小属性；
current:当前迭代变量；
even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）。

th:if 根据条件判断是否需要展示此标签

<a th:if ="${userId == collect.userId}">

内部是一个判断，如果为true则展示

th:with 进行局部赋值运算

<div th:with="a=${b-2}"  th:text="${a}"></div>

th:src 替换 HTML 中的 src 属性

thymeleaf的引入

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

小结：这两天刚开始学thymeleaf，感觉和ajax有明显的不同，它的引用虽然不是很复杂，但有点繁琐，emm最近了解的还不深入，还需要多练习练习一下它。

select标签在js中的一个小问题

最近在用select标签写个人信息生日的时候发现了个小问题，就是当你选择器选择select标签时，你使用onclick，对它里面的option标签是没用的，但是可以在onclick里面在套一个onclick，从而监听option标签，并且可以在第二个onclick内用它的value属性即可得到option的值。