thymleaf的使用

内联表达式

  • 内联表达式允许我们直接在HTML文本中使用标准表达式，而不需要使用th:*标签属性

  • [[…]],相当于th:text，对含有HTML标签的内容自动进行字符转义

    1
    2
    3
    后台String htmlContent = “Welcome to BeiJing!”

    <p>The message is : [[${htmlContent}]]</p>	输出：	The message is : <b>Welcome to BeiJing!</b>

  • [(…)]，相当于 th:utext，对含有HTML标签的内容不进行字符转义

    1
    2
    3
    后台String htmlContent = “Welcome to BeiJing!”

    <p>The message is : [(${htmlContent})]</p>	输出:	The message is : Welcome to BeiJing!

  • th:inline

值 描述
none 禁止使用内联语法，会直接输出[[ ]]and[( )]
text 文本内联，可以使用th:each等高级语法
css 样式内联，如: <style th:inline="css">
javascript 脚本内联，如：<style th:inline="javascript">

none

<!-- [[1, 2], [3, 4]] -->
<p th:inline="none">[[1, 2], [3, 4]]</p>

text

<!-- 北京 上海 广州 深圳 -->
<p th:inline="text">
	[# th:each="city : ${cities}"]
	[(${city.name})]
	[/]
</p>

css

<style th:inline="css">
	body {
		background-color:[[${bgColor}]];
	}
</style>

javascript

<script th:inline="javascript">
    var user = [[${user}]];
    alert("用户名：" + user.name);
</script>

注释

  • 标准注释<!-- … —>，注释的代码块会在文件源代码中显示出来

单行注释

<!-- <span>${message}</span> --->

多行注释

<!--
<div th:switch="${user.role}">
    <p th:case="admin">管理员</p>
    <p th:case="user">普通用户</p>
</div>
-->
  • 解析器级注释，注释的代码块会在引擎解析的时候抹去

单行注释

<!--/* <span>${message}</span> */-->

多行注释

<!--/*
<div th:switch="${user.role}">
 	<p th:case="admin">管理员</p>
 	<p th:case="user">普通用户</p>
</div>
*/-->