thymeleaf模板引擎语法及常用指令学习

来自喵星

已于 2023-08-18 17:48:00 修改

阅读量931

点赞数 1

分类专栏： Java Javascript 文章标签：学习 java 前端

于 2022-12-28 17:36:36 首次发布

本文链接：https://blog.csdn.net/qq_27577113/article/details/128471844

版权

Java 同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

Javascript

22 篇文章 1 订阅

订阅专栏

thymeleaf模板引擎常用指令及表达式

在springboot中配置thymeleaf

html页面中普通取值

在controller类方法中使用org.springframework.ui.Model传参

@GetMapping("/hello")
public String hello(Model model) {
    model.addAttribute("msg", "hello thymeleaf");
    return "hello";
}

使用变量值，在标签中直接使用变量值

<h3 style="text-align: center">[[${msg}]]</h3>
或通过th:text指令填充内容
<p style="text-align: center">
    <span th:text="${msg}"></span>
</p>

html页面中使用对象

@RequestMapping(value = "/hello")
public String hello(Model model) throws Exception {
    model.addAttribute("msg", "hello thymeleaf");

    Map<String, Object> person = new HashMap<>();
    person.put("name", "zs");
    person.put("age", 20);
    model.addAttribute("person", person);
    return "hello";
}

在标签中直接使用对象

<label>[[${msg}]]</label>
<label>[[${person.name}]]</label>
<label>[[${person.age}]]</label>

普通运算与字符串

<label>[[${'姓名：'+person.name}]]</label>
<label>[[${'年龄：'+person.age}]]</label>
<span th:text="${'消息: '+msg}"></span>

html页面中的逻辑控制

使用if进行控制

<p style="text-align: center">
    <span th:if="${person.age==20} and ${person.name != ''}">
        张三都30碎了，要做一个坚强的打工人
    </span>
</p>

if 语句中可以使用的运算符：

比较运算符：

>(gt), <(lt), >=(ge), <=(le), ==(eq), !=(neq/ne), !(not)

算术操作符:
+, -, *, /(div), %(mod)

逻辑运算符：

1. 逻辑与 &&(and)：
2. 逻辑或 ||(or)：

if-else-if使用, 使用th:switch替代：

<p style="text-align: center">
    <div th:switch="${person.name}">
        <p th:case="'zs'">User is an zs</p>
        <p th:case="'lisi'">User is a lisi</p>
        <p th:case="*">前面都不是</p>
    </div>
</p>

html页面中的循环语句

@RequestMapping(value = "/hello")
public String hello(Model model) throws Exception {
    model.addAttribute("msg", "hello thymeleaf");

    List<Map<String, Object>> personList = new ArrayList<>();
    Map<String, Object> person = new HashMap<>();
    person.put("name", "zs");
    person.put("age", 20);
    personList.add(person);
    model.addAttribute("personList", personList);
    return "hello";
}

循环的使用及使用循环内置的变量

<p style="text-align: center"
   th:each="person,indexInc : ${personList}"
   th:text="${person.name}">
</p>

indexInc.index为索引

thymeleaf控制html标签属性

控制input值：
<p style="text-align: center"
   th:each="person,indexInc : ${personList}">
    索引:<input type="text" th:value="${indexInc.index}">
    <input type="text" th:value="${person.name}">
    <input type="text" th:value="${person.age}">
</p>

三元表达式修改style样式：
<p style="text-align: center" th:style="'color:' + ${person.age == 20 ? 'red' : 'blue'}"
   th:each="person,indexInc : ${personList}">
    <input type="text" th:value="${person.name}">
    <input type="text" th:value="${person.age}">
</p>

thymeleaf设置html标签属性
<p style="text-align: center" th:style="'color:' + ${person.age == 20 ? 'red' : 'blue'}"
   th:each="person,indexInc : ${personList}">
    <input type="text" th:value="${person.name}">
    <input type="text" th:value="${person.age}">
    <span th:my-attr="${person.name}"></span>
</p>

header标签中的文件引用

/开头可以自动转换context-path到路径中

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>demo</title>
		<link rel="stylesheet" th:href="@{/static/lib/layui/css/layui.css}">
		<link rel="stylesheet" type="text/css" th:href="@{/static/css/hp-layui.css}" />
		<link rel="shortcut icon" th:href="@{/static/admin.png}" />
		<script th:src="@{/static/js/jquery.min.js}"></script>
	 	<script th:src="@{/js/afquery.js}"></script>

	</head>

在js中获取属性

需要在页面中加入

<script type="text/javascript" th:inline="javascript">

，表示使用thymeleaf进行解析

var data = [[${data}]]‘’，获取data，data没有则为’’

var data = ‘[[${data}]]’ 直接获取字符串类型的data

其他标识

其他内置函数或操作

var ctx = [[@{/}]]; 获取ContextPath虚拟路径，这里ctx是一个object

或者

<script type="text/javascript" th:inline="javascript">
	var ctx;
	ctx = /*[[@{/}]]*/ '';
	ctx = ctx.endsWith('/') ? ctx.substring(0, ctx.length - 1) : ctx;
</script>