thymeleaf

  • thymeleaf已关闭评论
  • 29 次浏览
  • A+
所属分类:Web前端
摘要

1、通过${}来获取model中的变量,注意这不是el表达式,而是ognl表达式,但是语法非常像

1、通过${}来获取model中的变量,注意这不是el表达式,而是ognl表达式,但是语法非常像

<h2 th:object="${user}">     <p>Name: <span th:text="*{name}">Jack</span>.</p>     <p>Age: <span th:text="*{age}">21</span>.</p>     <p>friend: <span th:text="*{friend.name}">Rose</span>.</p> </h2>  <h2 th:object="${user}">     <p>FirstName: <span th:text="*{name.split(' ')[0]}">Jack</span>.</p>     <p>LastName: <span th:text="*{name.split(' ')[1]}">Li</span>.</p> </h2>  <span th:text="${#dates.format(today,'yyyy-MM-dd')}">2018-04-25</span>

<span th:text="'thymeleaf'">template</span> //字符串常量值

2、判断

<div th:if="true">     当条件为true则显示。 </div>  <div th:unless ="false">     当条件为false 则显示 </div>

 3、进行文本替换

<span th:text="你好"></span>  //不会解析html <span th:text="你好"></span>  //会解析html

4、switch使用

<div th:switch="${user.name}">       <p th:case="'ljk'">User is  ljk</p>       <p th:case="ljk1">User is ljk1</p> </div>

5、each使用

<tr th:each="user : ${userList}" th:class="${userStat.odd}? 'odd'">       <td th:text="${user.name}">Onions</td>       <td th:text="${user.age}">2.41</td>  </tr>

6、属性设置

//用于声明在标签上class 属性信息(th:class) <p th:class=" 'even'? 'even' : 'odd'" th:text=" 'even'? 'even' : 'odd'"></p>   //用于声明html中或自定义属性信息(th:attr) <img  th:attr="src=@{/images/gtvglogo.png}" /> 输出为<img src="/sbe/images/gtvglogo.png">  //用于声明html中value属性信息(th:value) <input type="text" th:value="${name}" />  //用于声明html from标签中action属性信息(th:action) <form action="subscribe.html" th:action="@{/subscribe}">        <input type="text" name="name" value="abc"/> </form> 输出结果: <form action="/sbe/subscribe">        <input type="text" name="name" value="abc"> </form>  //用于声明htm id属性信息(th:id) <p th:id="${id}"></p> 输出结果: <p id="123"></p>  //用于声明htm 中的onclick事件(th:onclick) <script type="text/javascript">     function showUserInfo(){         alert("i am zhuoqianmingyue!")     } </script>  <body>    <p th:onclick="'showUserInfo()'">点我</p> </body>  //用于声明htm 中的selected属性信息(th:selected) <select>     <option name="sex"></option>     <option th:selected="1 == ${sex}"></option>     <option th:selected="0 == ${sex}"></option> </select> 输出结果: <select> <option name="sex"></option>     <option selected="selected"></option>     <option></option> </select>  //用于thymeleaf 模版页面中局部变量定义的使用(th:with) <p th:with="df='dd/MMM/yyyy HH:mm'">         Today is: <span th:text="${#dates.format(today,df)}">13 February 2011</span>     </p>  <div th:with="firstEle=${users[0]}">     <p>         第一个用户的名称是: <span th:text="${firstEle.name}"></span>.     </p> </div>

7、Elvis运算符

//Elvis运算可以理解成简单的判断是否为null的三元运算的简写,如果值为nullzhe显示默认值,如果不为null 则显示原有的值 <p>Age: <span th:text="${age}?: '年龄为nll'"></span></p>

8、三元表达式

//我们可以在thymeleaf 的语法中使用三元表达式 具体使用方法是在th:x 中通过 表达式?1选项:2选项 <p th:class=" 'even'? 'even' : 'odd'" th:text=" 'even'? 'even' : 'odd'"></p> <p th:value="${name eq 'ljk' ? '帅哥':'丑男'}" th:text="${name eq 'ljk' ? '帅哥':'丑男'}"></p>

 9、Elvis运算符

//一种特殊简写操作,当显示的值为null 是就什么都不做
<
span th:text="${name} ?: _">no user authenticated</span>

10、如何使用内连操作

我们可以通过 在父标签声明 th:inline="text" 来开启内联操作。当然如果想整个页面使用可以直接声明在body上即可。具体使用方式如下面代码所示。 <div th:inline="text"> <p>Hello, [[${user.name}]]!</p> </div> 等同于: <div> <p>Hello,zhuoqianmingyue!</p> </div>  [[...]]对应于th:text,[(...)]对应于th:utext

11、禁用内联操作

这我们可以通过在父标签或者本标签上声明th:inline="none"来禁用内联的操作,如下面代码所示: 模版页面

12、JavaScript内联

如果我们想在JavaScript 中使用内联操作,需要在 script 标签上声明 th:inline="javascript" 然后我们就可以 script 标签中使用内联操作了。具体使用方式如下面代码所示: <script th:inline="javascript">     var username = [[${user.name}]]; </script>  <script th:inline="javascript">     var username = "zhuoqianmingyue"; </script>

13、CSS内联

设我们将两个变量设置为两个不同的String值: classname = 'main elems' align = 'center' 我们可以像以下一样使用它们: <style th:inline="css">     .[[${classname}]] {       text-align: [[${align}]];     } </style>

14、定义footer.html页面 该页面就是我们的引用片段代码

定义footer.html页面 该页面就是我们的引用片段代码 <body>     <div th:fragment="copy">         &copy; 2011 The Good Thymes Virtual Grocery     </div> </body> 定义引用页面 index.html <div th:insert="~{footer :: copy}"></div> 通过 th:insert 和 ~{...}片段引用表达式 进行引入footer.html中定义的片段  通过id属性来声明片段 <body> <div id="copy-section" >     &copy; 2011 The Good Thymes Virtual Grocery </div> </body>  <div th:insert="~{footer :: #copy-section}"></div>

15、th:insert和th:replace(和th:include)之间的区别

th:insert 是最简单的:他会将使用th:insert的标签 和引用片段的内容都显示出来 th:replace 插入引用片段的标签和内容 th:include类似于th:insert,只插入此片段的内容。 <body> <footer th:fragment="copy">   &copy; 2011 The Good Thymes Virtual Grocery </footer> </body>  <div th:insert="footer2 :: copy"></div> <div th:replace="footer2 :: copy"></div> <div th:include="footer2:: copy"></div>  输出结果: <div> <footer>   ? 2011 The Good Thymes Virtual Grocery </footer> </div>  <footer>   ? 2011 The Good Thymes Virtual Grocery </footer>  <div>   ? 2011 The Good Thymes Virtual Grocery </div>

16、带参数的引用片段

<body> <div th:fragment="frag (onevar,twovar)">     <p th:text="${onevar} + ' - ' + ${twovar}">...</p> </div> </body>  <body>     <div th:insert="footer :: frag('a','b')"></div> </body>

17、用th:remove="all" 删除模版片段

 <tr class="odd" th:remove="all">     <td>Blue Lettuce</td>     <td>9.55</td>     <td>no</td>     <td>       <span>0</span> comment/s     </td>   </tr>  all:删除包含标记及其所有子标记。 body:不要删除包含标记,但删除其所有子标记。 tag:删除包含标记,但不删除其子项。 all-but-first:删除除第一个之外的所有包含标记的子项。 none: 没做什么。此值对于动态评估很有用。

18、#dates

处理日期数据 生成,转换,获取日期的具体天数 年数。 format操作 <span th:text="${#dates.format(date)}">4564546</span> 获取日期属性操作 <p th:text="${#dates.day(date)} "></p> 生成日期操作 <p th:text="${#dates.createNow()}"></p> #numbers 处理数字数据的转换。包括: 对不够位数的数字进行补0(formatInteger )<p th:text="${#numbers.formatInteger('123',4)}"></p> 输出<p>0123</p> 设置千位分隔符(formatInteger)<p th:text="${#numbers.formatInteger('1000',2,'POINT')}"></p> 输出:<p>1.000</p> 精确小数点(formatDecimal )<p th:text="${#numbers.formatDecimal('10.123',3,2)}"></p> 输出:<p>010.12</p> 钱显示符号操作 <p th:text="${#numbers.formatCurrency('1000')}"></p> 输出:<p>¥1,000.00</p> 设置百分号(formatPercent )<p th:text="${#numbers.formatPercent('0.2',2, 4)}"></p> 输出:<p>20.0000%</p> 生成数组(sequence ): <div th:each="num : ${#numbers.sequence(0,4)}" >           <p th:text="${num}"></p> </div>  输出: <div><p>0</p></div> <div><p>1</p></div>  <div><p>2</p></div> <div><p>3</p></div> <div><p>4</p></div>

19、#strings

处理String的相关操作,包括: 字符串转换(toString) 检查字符串是否为空(isEmpty) 字符串是为空替换操作(defaultString) 检查字符串中是否包含某个字符串(contains containsIgnoreCase) 检查字符串是以片段开头还是结尾(startsWith endsWith) 截取(substring substringAfter) 替换(replace) 追加(prepend append) 变更大小写(toUpperCase toLowerCase) 拆分和组合字符串(arrayJoin arraySplit) 去空格(trim) 缩写文本(abbreviate) 字符串连接(concat)

20、#bools

判断对象是否为ture或者是否为false的操作。 数字 1 为 ture , 0 为 false; "on" 为 true, "off" 为false; "true" 为true, "false"为 false;  <p th:text="${#bools.isTrue(1)} "></p> 输出结果:<p>true</p>

21、#arrays

处理数组的相关操作的内置对象,包含: 转换数组 toStringArray toIntegerArray, 获取数组的长度(length ), 判断数组是否为空(isEmpty ) 是否包含某个元素(contains) 是否包含一批元素(containsAll)

22、#lists

计算长度(size) 检查list是否为空(isEmpty) 检查元素是否包含在list中(contains,containsAll) 对给定list的副本排序(sort)

23、#sets

转换为Set(toSet) 计算长度(size) 检查set是否为空(isEmpty) 检查元素是否包含在set中 (contains,containsAll)

24、#maps

计算长度(size) 检查map是否为空(isEmpty) 检查映射中是否包含键或值(containsKey,containsAllKeys,containsValue)

25、#aggregates

用户处理集合或者数组的一些统计操作,包括: 求和(sum) 求平均值(avg) 处理包装类型或基本类型的数组或集合