thymeleaf(三) ____基本语法

作者: 蜗牛船长 | 来源:发表于2018-06-03 02:41 被阅读0次

thymeleaf(三) ____基本语法
thymeleaf基本语法
Thymeleaf的基本语法
thymeleaf教程
十、Thymeleaf使用以及语法
SpringBoot系列之集成Thymeleaf用法手册
Thymeleaf语法
thymeleaf笔记
Thymeleaf
springboot中避免Thymeleaf对html语法检查过

变量表达式 ${...}
选择变量表达式 * {...}
消息表达式 #{...}
链接网址表达式 @{...}
片段表达式 ~{....}

1 转义符号与不转义符号

th:utext 是不进行转义的是原样输出的,th:text 会把 < > 转义处理成 > 成<

   model.addAttribute("content","这是一个<font style=\"color:red\">富文本</font>");

    <p th:text="${content}"></p>
    <p th:utext="${content}"></p>

image.png

2循环迭代

迭代中的属性有 index (0开始),count(1开始),size(总数), iter(当前迭代对象),even/odd (奇偶数判断),first ,last

list

   <tr th:each="user,iter : ${users}" th:class="${iter.odd}? 'success' : 'danger'">
            <td th:text="${user.name}"></td>
            <td th:text="${user.age}">测试2</td>
            <td th:text="${user.sex}">测试3</td>
        </tr>

map

  <tr th:each="map : ${map}">
            <td th:text="${map.key}"></td>
            <td th:text="${map.value}"></td>
        </tr>

3,文本追加

  <p th:text="'内容'+${add}">
   等价与
  <p th:text="|内容${add}|">

4,运算符

+ \ - * / %

   <p th:text="(5 + 4) * 10 / 30  + 200">

*5条件判断与比较符号

比较符合支持
gt >
ge >=
le <=
!
eq ==
neq/ne !=

   <tr th:each="user,iter : ${users}" th:class="${iter.odd}? 'success' : 'danger'">
            <td th:text="${user.name}"></td>
            <td th:text="${user.age}">测试2</td>
            <td th:text="${user.sex}">测试3</td>
            <td th:if="${user.age} ge 18">成年人</td>
            <td th:if="${user.age} lt 18">未成年人</td>

        </tr>

 
 <td th:text="${user.sex} eq 0 ? '男' : '女'">测试3</td>

th:unless 与th:if 正好相反

 
 <td th:unless="${condition}">测试3</td>

6,默认表达式,可以用在判断属性值为空的时候

下图中*{name} 等价为从当前的作用对象中寻找name的属性,既从object中寻找.

    <div th:object="${#httpSession.getAttribute('currentUser')}">
    <p >当前用户:<span th:text="*{name}"></span></p>
    <br/>
    <span th:text="*{age}?:'年龄未知'"></span>
    </div>

哑操作符号,当age为空时,使用_代替不做处理,显示原始文本.与上面的结果是相同的.

 <span th:text="*{age}?:_">年龄未知</span>

7,删除片段

在模板运行时删除的

   <span th:remove="all">要被删除</span>

8 格式化与工具类

    * 格式化日期

   <td th:text="${#dates.format(user.bornDate,'yyyy-MM-dd')}"></td>

创建日期
${#dates.create(year,month,day)}
格式化iso18601日期
${#dates.formatISO(date)}
得到星期
${#dates.dayOfWeek(date)}
得到秒
${#dates.millisecond(date)}
....更多请参考官网附录;
*String 工具类

${#strings.contains(name,'ez')}
${#strings.startsWith(name,'Don')}
${#strings.endsWith(name,endingFragment)}
${#strings.indexOf(name,frag)} ${#strings.substring(name,3,5)} ${#strings.substringAfter(name,prefix)} // ${#strings.substringBefore(name,suffix)} // ${#strings.replace(name,'las','ler')}
${#strings.arrayJoin(namesArray,',')}

字符串转义
${#strings.escapeXml(str)} ${#strings.escapeJava(str)} ${#strings.escapeJavaScript(str)} ${#strings.unescapeJava(str)} ${#strings.unescapeJavaScript(str)}

求和求平均数


      List<Integer> numlist = new ArrayList<>();
        numlist.add(3);
        numlist.add(2);
        numlist.add(13);
        numlist.add(23);
        model.addAttribute("num",numlist);

 <span th:text="${#aggregates.sum(num)}"></span>
  <span th:text="${#aggregates.avg(num)}"></span>

9,设置多种属性值;

th:text 设置的是 text 内容,
那么value怎么设置呢
使用th:value
当然还有更多....

th:id              
th:class                
th:attr             
th:axis                 
th:border               
th:challenge            
th:class                
th:codetype             
th:compact              
th:contextmenu          
th:dir                  
th:enctype              
th:formaction           
th:formtarget           
th:frameborder          
th:high                 
th:ondurationchange     
th:onerror              
th:onforminput          
th:oninvalid
th:for  
th:formenctype
th:onfocus
th:onhashchange
th:onkeydown
.....

特殊的
th:alt-title将同时设置alt属性和title属性,在设置img属性的时候常用.

10, 选择表达式 * 的用法;

例子

    <div th:object="${#httpSession.getAttribute('currentUser')}">
    <p >当前用户:<span th:text="*{name}"></span></p>   
    </div>

span 标签中有选定对象既object ,所有使用* 可直接找到object的name属性,假如没有选定对象,name将从上下文中寻找属性值,如果没有选定对象,那么* 和 $的用法将一样.

11,设置前缀和后缀

在设置属性的时候可以不覆盖现有属性,而为现在的属性增加前后缀.

    <button type="button" class="btn  btn"  th:attrappend="class='-success'">按钮1</button> //后追加
    <button  type="button" class="btn-warning" th:attrprepend="class='btn '">按钮2</button> //前追加

按钮1的class后追加了-success 由原来的btn btn >>> btn btn-success
按钮2的class后追加了btn 由原来的btn-warning >>> btn btn-warning

image.png

12,checked属性;

在form 表单中经常需要在页面加载的时候为元素根据条件添加checked属性;

 <input type="checkbox"  th:checked="${3 gt 1}" >

13 switch 语句

    <div th:switch="${fruit}">
        <p th:case="'苹果'">甜的</p>
        <p th:case="'香蕉'">软的</p>
        <p th:case="'西瓜'">爽的</p>
        <p th:case="*">其他的</p>
    </div>

14 声明变量

  <div th:with="u=${#httpSession.getAttribute('currentUser')}">
       <input type="text" th:value="${u.name}">
    </div>

15,属性执行的优先级别

当多个属相都在同一个元素的时候,执行顺序是怎么样的呢.
1, th:insert th:replace
2, th:each
3, th:if th:unless th:switch th:case
4, th:object th:with
5, th:attr th:attrappend th:attrprepend
6, th:value th:src ...
7, th:text th:utext
8, th:fragment
9, th:remove

16, 如何注释

解析器级的注释,解析的时候会删除掉,可以用来删除原型中的数据

   <!--/*-->
    <p>
     我是要被删除的
    </p>
    </div>
    <!--*/-->

thymeleaf 注释,直接打开html看不到里面的内容,模板执行后可以看见里面的呢内容.和解析器注释相反,

  <!--/*/
    <p>
      直接打开看不见我
    </p>
    </div>
     /*/-->

17,th:block块,

唯一的一个块元素,
可以和注释配合使用

   <!--/*/  <th:block th:each="user,iter : ${users}">  -/*/-->
            <tr>
             <td th:text="*{user.name}"></td>
             <td th:text="${user.age}">测试2</td>
         </tr>
        <!--/*/ </th:block>-/*/-->