Thymelif基本语法

最新推荐文章于 2022-12-13 13:32:25 发布

汪

最新推荐文章于 2022-12-13 13:32:25 发布

阅读量373

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_42789301/article/details/107094642

版权

两种标准写法

			1. <span th:text=""> 这种写法需要引入 thymelif 的命名空间。"**http://www.thymeleaf.org**"
			2. <span data-th-text="...">html5的标准写法，自定义属性。这种不需要命名空间

标准表达式

变量表达式

语法：${…}

	<span th:text="${book.author.name}">

消息表达式

消息表达式也称为文本外部化，国际化或i18n
语法：#{…}

<table>
	<th th:text="#{header.address.city}"></th>
</table>

选择表达式

与变量表达式区别：它们是在当前选择的对象而不是整个上下文变量映射上执行。
语法：*{…}

	<div th:object="${book}">
		<span th:text="*{title}"></span>
	</div>

链接表达式

语法：@{…}
链接表达式可以是相对的，在这种情况下，应用程序上下文将不会作为URL的前缀。

<a th:href="@{../documents/report}"></a>

服务器相对路径

<a th:href="@{~/contents/main}"></a>

和协相对(就像绝对URL，但浏览器将使用在显示的页面中使用的相同的HTTP或HTTPS协议)

<a th:href="@{//static.mycompany.com/res/initial}"></a>

当然，LINK表达式可以是绝对的

<a th:href="@{http://www.mycompany.com/main}"></a>

分段表达式

语法:th:insert 或 th:replace

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<body>
		<div th:fragment="copy">
、			&copy;2017 <a href="https://waylau.com">waylau.com</a>
		<div>
	</body>
</html>

引用片段使用insert或者replace

<!--引入 th:fragment="copy"中的内容-->
<html xmlns:th="http://www.thymeleaf.org">
	<body>
		<div th:insert="~{footer :: copy}"></div>
	</body>
</html>

文字

文本

<html>
	<body>
		<p>
		Now you are looking at a <span th:text="'web application'">文本需要用'单引号'引起来</span>
		</p>
	</body>
</html>

数字

<html>
	<body>
		<p>
		 <span th:text="2020">数字直接输入</span>
		  <span th:text="2010+10">也可以直接在里面进行数学计算</span>
		</p>
	</body>
</html>

比较和等价

比较：>,<,>=,<=(gt,lt,ge,le)
等价：==,!=(eq,ne)

<html>
<ul class="pageination" data-th-if="${page.totalPages le 7}">
  </ul>
</html>

条件运算符

<tr th:class="${row.even}？’even':'add'">
</tr>

无操作

	<span th:text="${user.name}?:_">user不存在，展示此文本</span>

设置属性值

1.设置任意属性值th:attr

<!--定义了一个名字为action的属性值-->
<form action="subscribe.html" th:attr="action=@{/subscribe}">
	<fieldset>
		<input type="text" name="email"/>
		<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>
	</fieldset>
</form>

显示方式

<form action="/gtvg/subscribe">
	<fieldset>
		<input type="text" name="email"/>
		<input type="submit" value="¡Suscribe!"/>
	</fieldset>
</form>

2.设置值到指定的属性

<form action="subscribe.html" th:attr="action=@{/subscibe}">
	<fieldset>
		<input type="text" name="email"/>
		<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>
	</fieldset>
</form>

显示方式

	<form action="subscribe.html" th:action="@{/subscibe}">
	<input type="submit" value="Subscribe!" th:value="#{subscibe.submit}"/>

迭代器

基本的迭代器 th:each

<li th:each="book:${books}" th:text="${book.title}"></li>

条件语句

th:if 成立的情况下使用
th:unless 不成立的情况下使用

<a href="comments.html"
	th:href="@{/product/comments{prodId=${prod.id})}“
	th:if="${not #lists.isEmpty(prod.comments)}">view</a>
<a href="comments.html“ th:href="@{/comments(prodId=${prod.id})}"
th:unless="${#lists.isEmpty(prod.comments)}">View
</a>

switch语法

<div th:switch="${user.role}">
	<p th:case="'admin'">User is an administrator</p>
	<p th:case="#{roles.manager}">User is a manager</p>
	<p th:case="*">User is some other thing</p>
</div>

模板布局

模板布局使用到的三种属性
th:insert ,th:replace,th:include三者区别
th:insert 他将简单地插入指定地片段作为正文地主标签。
th:replace:用指定实际片段来替换其主标签。
th:include:类似与insert 但不是插入片段他只是插入此片段地内容。

属性优先级

Order	Feature	Attributes
1	Fragment inclusion	th:include;th:replace
2	Fragment iteration	th:each
3	Conditional evaluation	th:if；th:unless；th:switch；th:case
4	Local variable definition	th:object；th:with
5	General attribute modification	th:attr；th:attrprepend；th:attrappend
6	Specific attribute modification	th:value, th:href, th:src, etc.
7	Text (tag body modification)	th:text；th:utext
8	Fragment specification	th:fragment
9	Fragment removal	th:remove

注释

删除<!–/* 和 */–>之间的内容，编译器将不会在编译。

<!--/*-->
<div th:switch="${user.role}">
	<p th:case="'admin'">User is an administrator</p>
	<p th:case="#{roles.manager}">User is a manager</p>
	<p th:case="*">User is some other thing</p>
</div>
<!--*/-->

静态的时候被注释，解析的时候显示出

<!--/*/
<div th:switch="${user.role}">
	<p th:case="'admin'">User is an administrator</p>
	<p th:case="#{roles.manager}">User is a manager</p>
	<p th:case="*">User is some other thing</p>
</div>
/*/-->

内联

[[…]]或[()]分别对应于th:text和th:utext

<!--这种特殊符号是不会被转译的-->
	<p>The message is "[($(msg)]"</p>

<p>The message is "The is <b>great!</b>"</p>

<!--[[...]]这种可以强制转换特殊字符-->
<p>The message is "[[${msg}]]</p>

当输出内容有[[…]],或者[(…)]文本内容时。禁用内联

<p th:inline="none">a double array looks in[[1,2,3,4,5,6],[1,2,3]]</p>

如果先用css 那么就在 th:inline=“css”,如果先用javaScrip就输入javascrip

汪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Thymelif基本语法

两种标准写法 1. <span th:text=""> 这种写法需要引入 thymelif 的命名空间。"**http://www.thymeleaf.org**" 2. <span data-th-text="...">html5的标准写法，自定义属性。这种不需要命名空间标准表达式变量表达式语法：${…} <span th:text="${book.author.name}">消息表达式消息表达式也称为文本外部化，国际化或i18n语法：#{
复制链接

扫一扫