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基本语法》
更多学习视频和专栏文章请到哔站个人空间: 布道师学院的个人空间-布道师学院个人主页-哔哩哔哩视频
更多资源和项目下载请到:”开源吧(找实战项目和毕设项目的好网站)“ :开源吧