thymeleaf是帮我们进行视图渲染的技术，将静态的html和数据结合起来
很适合前后端的独立开发
1、常用属性
th:text:文本的显示。其中的值会替换html指定标签中的值
th：utext：支持html的文本显示
th：value：给属性赋值
th：object：用于设置选定对象
th：if：条件判断可以和th：unless配合使用
th：switch：选择判断，配合th：case使用
th：each：循环迭代
th：href：设置链接地址
<!DOCTYPE html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="D:\web前端\lib\jquery-3.6.0.js">
</head>
<body>
<!-- 1.text改便标签内容 -->
<div th:text="${msg}"> </div>
<!-- 这两种方法可是进行字符串的联接 -->
<div th:text="${msg}+zyj"></div>
<div th:text="|${mag}zyj|"></div>
<!-- 2.utext可以进行字体的加粗，斜体等对文本的操作操作 可显示html标签出来-->
<!-- 比如说添加了<b></b> -->
<div th:utext="${msg}"></div>
<!-- 3.object可以简便使用对象的多个和属性\\ -->
<!--
原来这样写
<div th:text="${对象名.属性}"></div>
-->
<div th:object="${对象名}">
<p th:text="*{content}"></p>
<p th:text="*{title}"></p>
<p th:text="*{introduce}"></p>
<p th:text="*{status}"></p>
</div>
<!-- 4。value更对多用于更改表单属性 -->
<input type="text" th:value="${zyjzyjzyjzyj}">
<!--5.if，为true显示，false不显示 -->
<div th:if="${true}">若为true显示</div>
<div th:if="${false}">false不显示</div>
<!--实际连标签也不会生成 -->
<div th:if="${res.err==0}">true</div>
<!-- unless与if相反false显示，true不显示 -->
<!-- 6 switch -->
<div th:switch="${res.err}">
<p th:case="0">true</p>
<p th:case="0">显示</p>
<p th:case="1">false</p>
<!-- 若为0会显示true，“显示”不会显示因为只要第一个判断通过则会直接跳出 -->
<p th:case="*">其他</p>
<!-- 若判断句中都找不到则会返回其他,代通配符*那个写到最后哦 -->
</div>
<!--7.each -->
<div th:each="列表:&{元素元素}">
<span th:text="&{blog.title}"></span>
</div>
<!-- each属性还有一个状态变量iterStat -->
<div th:each="列表,iterStat : ${元素元素}" th:class="&{iterstat.odd}?'odd'">
<!--
这个是判断这一行是否为偶数行如果为偶数则类名变为odd
并且每一行都会进行判断
-->
<span th:text="${blog.title}"></span>
<!-- 打印下表 -->
<span th:text="${iterStat.index}"></span>
</div>
<!-- 8.href -->
<a th:href="@{链接地址(id=${video.id})}"></a>
<!--会自动转化为?后面加值的形式-->
</body>
</html>
2.内联表达式
当不适合使用属性的方法时可与使用内联表达式
<div>[[${msg}]]</div> <!-- <div th:text="${msg}"></div>一样的效果 --> <div>[($msg)]</div> <!-- 相当于utext --> <!-- 内敛表达式的取消 和开启--> <div th:inline="none">[[${msg}]]</div> <div th:="text">[[${msg}]]</div>
[[]]相当于text不会转码标签
[()]相当于utext会转码标签等
在别的地方开启内联表达式这样写
<script th:inline="javascript"></script>
在预览时
<script th:inline="javascript">
var res=/*[[${msg}]]*/{}
添加注释加默认值是的方法防止报错
</script>
扫一扫
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
