Thymeleaf介绍

  • 语法规则
    • th:text = ""  改变当前元素里面的文本内容
      • th: 任意html属性
        • 比如 th: id , th: class ....
      • 例如 th:text（转义） 和 th:utext（不转义）  都传递的是字符串 "<h1>你好</h1>"
        • th：text    ------     <h1>你好</h1>
        • th:  utext  ------     你好（这个是原格式）
 
    • 表达式语法
      • Simple expressions:
        • Variable Expressions: ${...}
          • <div th:id="${name}", th:class="${name}"></div>
          • 获取对象的属性、调用方法
          • 使用内置的基本对象
          • 内置的一些工具对象
        • Selection Variable Expressions: *{...}
        • Message Expressions: #{...}
          • 获取国际化内容
        • Link URL Expressions: @{...}
          • th:src="@{/js/test.js}"
          • 定义 url 链接
        • Fragment Expressions: ~{...}
          • 片段引用表达式
      • Literals（字面量）
        • Text literals: 'one text' , 'Another one!' ,…
        • Number literals: 0 , 34 , 3.0 , 12.3 ,…
        • Boolean literals: true , false
        • Null literal: null
        • Literal tokens: one , sometext , main ,…
      • Text operations:（文本操作）
        • String concatenation: +
        • Literal substitutions: |The name is ${name}|
      • Arithmetic operations:（数学运算）
        • Binary operators: + , - , * , / , %
        • Minus sign (unary operator): -
      • Boolean operations:（布尔运算）
        • Binary operators: and , or
        • Boolean negation (unary operator): ! , not
      • Comparisons and equality:（比较运算）
        • Comparators: > , < , >= , <= ( gt , lt , ge , le )
        • Equality operators: == , != ( eq , ne )
      • Conditional operators:（条件运算）
        • If-then: (if) ? (then)
        • If-then-else: (if) ? (then) : (else)
        • Default: (value) ?: (defaultvalue)
      • Special tokens:（特殊操作）
        • Page 17 of 106
        • No-Operation: _

 

  • 书写 thymeleaf 测试
<!DOCTYPE HTML>
<!-- 导入thymeleaf -->
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!-- th:href = '@{/css/success.css}' 中的css前面的 / 不能省略，会报错 -->
    <link type='text/css' rel='styleSheet' th:href='@{/css/success.css}'/>
    <script th:src="@{/js/test.js}"></script>
</head>


<body>
    <!-- 使用th: 任意html标签, ${name}取索引为'name'的元素的值，如后端传入name -->
    <div th:id="${name}"></div>
        <!-- 注意，使用了th:xxx = "" 之后，外面的双引号是th的，所以字符串还得自己再加引号，不然会出错 -->
        <span>账号:</span><input type="text" th:placeholder=" 'QQ号码/手机/邮箱' ">

        <!--  如果不用th: ，则原来只要有一对引号就可以了  -->
        <span>密码:</span><input type="password" placeholder="密码">
  
    <hr>
    <!--  使用th:each 遍历链表，user依次取自users中的元素  -->
    <tr th:each="user : ${users}">
        <!--  会自动生成多个<td>  -->
        <td th:text="${user}"></td>
    </tr>

    <hr>
    <!--  if(name == 'XiaoMing')  ....  -->
    <h4 th:if="${name} == 'XiaoMing' " th:text="'This true!'" ></h4>

    <hr>
    <!--  打印四个<h4>  -->
    <h4 th:text="${user}" th:each="user : ${users}"></h4>

    <hr>
    <!--  一个<h4>中打印四个<span>  -->
    <h4>
        <span th:text="${user} + ' ' " th:each="user : ${users}"></span>
    </h4>
</body>

</html>

 

posted @ 2020-10-23 20:44  a最简单  阅读(560)  评论(0)    收藏  举报