三、thymeleaf基本语法

news2024/10/5 13:02:41

3.1、基本语法

3.1.1变量表达式:${...}

变量表达式用于在页面中输出指定的内容,此内容可以是变量,可以是集合的元素,也可以是对象的属性。主要用于填充标签的属性值,标签内的文本,以及页面中js变量的值等。

1、显示文本内容

把变量表达式放在一对嵌套的中括号中“[[]]”,可以用于输出标签之间的文本,也可用于给js变量赋一个静态的值。

如果文本是一段HTML标签,在页面输出时会进行转义,并不会添加成子标签。

示例

在TestServlet的doPost方法的request对象中添加两个字符串属性“title”和“msg”,其中“msg”是一个标签的脚本。

request.setAttribute("title", "这是一个字符串");
request.setAttribute("msg", "
这是一个字符串
");

在index.html中输出此属性的值

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[[${title}]]</title>
</head>
<body>	 
<div>[[${msg}]]</div>	 	
 <script type="text/javascript">	
	alert('[[${title}]]')	</script></body></html>

运行test.do,页面会输了此属性的值

点击“对话框”的"确定"后在页面显示的是转义后的内容。

如果需要加载为HTML标签,可以使用[()]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><title>[[${title}]]</title>
</head>
<body>
	 <div>[(${msg})]</div>	
 </body>
</html>

运行test.do,页面会输了此属性的值

2、标签属性值的赋值

要在标签属性上使用表达式,属性名前必须使用"th:"标识。thymeleaf几乎对所有的标签属性都进行了重定义,使每个属性都可以使用"th:"标签来进行动态赋值。

示例

在testServlet的情况中增加一个属性,用于设置字体的颜色

request.setAttribute("color", "color:red;");

在test.html中添加一个div标签,标签上添加"th:style"和“th:utext”属性。注意属性“th:utext”和“th:text”的区别,“th:utext”一般用于在标签内容添加HTML子元素,“th:text”用于输出文本内容,此属性与[[${}]]的作用相同。

<div th:style="${color}" th:utext="${msg}"></div>

运行test.do,页面显示效果如下

3、通过属性赋值

在一些业务中,某个属性可能需要根据条件来判断是否添加,比如checkbox的checkbox属性,input的readonly等。此时可以使用"th:attr"属性

示例:

在WebContent创建img目录,复制一张图片到此目录中,重命名为“test.xxx”,

在TestServlet的request中添加属性,保存此图片的路径

request.setAttribute("url", "/img/test.jpg");

在test.html中添加img标签,标签使用"th:attr"给src属性赋值

<img th:attr="src=@{${url}}"  width="200"/>

运行test.do,页面显示效果如下

“th:attr”也可以同时给多个属性赋值,比如图片的路径和宽度

 文章来源于哔站《三、thymeleaf基本语法》

更多学习视频和专栏文章请到哔站个人空间: 布道师学院的个人空间-布道师学院个人主页-哔哩哔哩视频

更多资源和项目下载请到:”开源吧(找实战项目和毕设项目的好网站)“ ​ :开源吧


                

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1060578.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

OpenCV项目开发实战--CUDA 模块使用详细介绍--附完整代码

如果您已经使用 OpenCV 一段时间,您应该已经注意到,在大多数情况下 OpenCV 使用 CPU,这并不总能保证您获得所需的性能。为了解决这个问题,2010 年 OpenCV 中添加了一个使用 CUDA 提供 GPU 加速的新模块。您可以在下面找到展示 GPU 模块优势的基准测试: 图 1: CPU 上的 Op…

Day-06 基于 Docker安装 Nginx 镜像

1.去官方公有仓库查询nginx镜像 docker search nginx 2.拉取该镜像 docker pull nginx 3. 启动镜像&#xff0c;使用nginx服务&#xff0c;代理本机8080端口(测试是不是好使) docker run -d -p 8080:80 --name nginx-8080 nginx docker ps curl 127.0.0.1:8080

黑马程序员 MySQL数据库入门到精通——进阶篇(2)

黑马程序员 MySQL数据库入门到精通——进阶篇&#xff08;2&#xff09; 1. SQL优化1.1 插入数据1.2 主键优化1.3 order by优化1.4 group by优化1.5 limit优化1.6 count优化1.7 update优化 2. 视图2.1 视图-介绍及基本语法2.2 视图-检查选项(cascaded)2.3 视图-检查选项(local)…

SQL Server不允许保存更改的解决方法

SQL Server不允许保存更改的解决方法

深信服SG上网优化管理系统存在任意文件读取漏洞 附POC

文章目录 深信服SG上网优化管理系统存在任意文件读取漏洞 附POC1. 深信服SG上网优化管理系统简介2.漏洞描述3.影响版本4.fofa查询语句5.漏洞复现6.POC&EXP7.整改意见8.往期回顾 深信服SG上网优化管理系统存在任意文件读取漏洞 附POC 免责声明&#xff1a;请勿利用文章内的…

软件设计师_计算机网络_学习笔记

文章目录 4.1 网路技术标准与协议4.1.1 协议4.1.2 DHCP4.1.3 DNS的两种查询方式 4.2 计算机网络的分类4.2.1 拓扑结构 4.3 网络规划与设计4.3.1 遵循的原则4.3.2 逻辑网络设计4.3.3 物理网络设计4.3.4 分层设计 4.4 IP地址与子网划分4.4.1 子网划分4.4.2 特殊IP 4.5 HTML4.6 无…

C++入门-day01

一、认识C C融合了三种不同的编程方式 C代表的过程性语言在C基础上添加的类、结构体puls代表的面向对象语言C模板支持泛型编程 C完全兼容C的特性 Tips&#xff1a;侯捷老师提倡的Modren C是指C11、C14、C17和C20这些新标准所引入的一系列新特性和改进。在我们练习的时候也应当去…

QT实现TCP服务器客户端的实现

ser&#xff1a; widget.cpp&#xff1a; #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//实例化一个服务器server new QTcpServer(this);// 此时&#xf…

MyBatisPlus(八)范围查询

说明 范围查询&#xff0c;包括&#xff1a; 大于大于等于小于小于等于在范围内在范围外 大于&#xff1a;gt 代码 Testvoid gt() {LambdaQueryWrapper<User> wrapper new LambdaQueryWrapper<>();wrapper.gt(User::getAge, 20);List<User> users mapp…

Netty 4.1.98.Final 发布

Netty 4.1.98 稳定版已发布。Netty 是一个异步事件驱动的网络应用框架&#xff0c;主要用于可维护的高性能协议服务器和客户端的快速开发。 此版本还原了上一版本中所做的更改&#xff0c;这些更改导致 HTTP header 验证比所需的更严格 (#13615)。除此之外&#xff0c;当使用 n…

隐私交易成新刚需,Unijoin 凭什么优势杀出重围?

随着区块链技术的普及和发展&#xff0c;全球加密货币用户在持续增长&#xff0c;根据火币研究院公布的数据&#xff0c;2022年全球加密用户已达到 3.2亿人&#xff0c;目前全球人口总数超过了 80亿&#xff0c;加密货币用户渗透率已达到了 4%。 尤其是在 2020 年开启的 DeFi 牛…

mysql面试题12:讲一讲MySQL中什么是半同步复制?底层实现?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:讲一讲mysql中什么是半同步复制?底层实现? MySQL中的半同步复制(Semi-Synchronous Replication)是一种复制模式,它在主服务器将数据写入到二…

数组(数据结构)

优质博文&#xff1a;IT-BLOG-CN 一、简介 数组Array是一种线性表数据结构&#xff0c;它用一组连续的内存空间&#xff0c;存储一组具有相同类型的数据。 数组因具有连续的内存空间的特点&#xff0c;数据拥有非常高效率的“随机访问”&#xff0c;时间复杂度为O(1)。但因要保…

三分钟学习一个python小知识8-----------我的对python中pandas的理解--补充,

文章目录 一、利用pandas读入excel表&#xff0c;包括csv,xlsx等格式二、利用pandas读取没有表头的表格1.引入库 三、利用pandas读取有表头的表格四、利用pandas读取表格中的第一列五、利用pandas导出为excel数据总结 一、利用pandas读入excel表&#xff0c;包括csv,xlsx等格式…

实战型开发--3/3,clean code

编程的纯粹 hmmm&#xff0c;一开始在这个环节想聊一些具体的点&#xff0c;其实也就是《clean code》这本书中的点&#xff0c;但这个就还是更流于表面&#xff1b; 因为编码的过程&#xff0c;就更接近于运动员打球&#xff0c;艺术家绘画&#xff0c;棋手下棋的过程&#x…

四、互联网技术——局域网拓扑结构

文章目录 一、局域网拓扑结构二、虚拟局域网VLAN三、交换机VLAN划分四、VLAN的作用五、交换机的端口类型六、经典三层网络架构七、例题:局域网带宽利用分析八、网络安全基础九、恶意软件十、防火墙与入侵检测技术 一、局域网拓扑结构 局域网的主要特征由网络的拓扑结构、所采用…

windows系统下pycharm配置anaconda

参考&#xff1a;超详细的PycharmAnconda安装配置教程_pycharm conda_罅隙的博客-CSDN博客 下载好anaconda安装后&#xff0c;比如我们安装在D盘anaconda文件夹下&#xff0c;在pycharm配置好环境激活时出现问题&#xff0c;可能是电脑没有配置环境变量 需要将一下4行添加到电…

开发调试管理系统遇到的问题大全错误解决大全收集

问题大全错误解决大全 多模块项目依赖中&#xff0c;项目启动失败-org.yaml.snakeyaml.error.YAMLException: java.nio.charset.MalformedInputException报错&#xff1a;Error: The project seems to require yarn but it‘s not installednpm ERR! fatal: Could not read fro…

速看:免费领取4台阿里云服务器_申请入口及领取流程

注册阿里云账号&#xff0c;免费领云服务器&#xff0c;最高领取4台云服务器&#xff0c;每月750小时&#xff0c;3个月免费试用时长&#xff0c;可快速搭建网站/小程序&#xff0c;部署开发环境&#xff0c;开发多种企业应用。阿里云服务器网分享阿里云服务器免费领取入口、免…

芯驰D9评测(1)--开箱硬件版

工业级的板卡和其他一般的“玩具”开发板还是要有所差别的&#xff0c;所以第一篇评测我们来仔细看看用料&#xff1a; 1. 全景图 用料足&#xff0c;做工扎实&#xff0c;接口都做了外围引出&#xff0c;底板配个铝合金外壳&#xff0c;就是妥妥的工业嵌入式主机。 2. 电源…