thymeleaf用法心得

Thymeleaf常用语法

1.导入

<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

2.修改css,js,a,img

@{}

th:href="@{/asserts/css/wp-page-numbers.css}"

3.表达式嵌套

th:href="@{'/toArticle/' + ${article.getArtId()}}"

需要注意的地方,下面错误示范,不能出现多个 , 保 留 最 外 层 即 可 , 删 掉 里 面 的 {},保留最外层即可,删掉里面的 {}

th:text="${#dates.format(${article.getCreateTime()},'yyyy-MM-dd HH:mm:ss')}"

4.模板重用

<div th:replace="/commons/layout :: #branding" />

/commons/layout,#branding:指在/templates/commons/layout.html 里的id=branding 的标签

把这个标签copy进来,模板重用

5.script里使用 + 三元表达式写法 + '/号’连接表达式

<script language='javascript' th:inline="javascript">
// 需要内联才能使用th表达式
    // 文章总数不足分页文章数时,总页数至少为1
    var allPage = [[ ${arts_size}/${articles.size()} > 0 ? ${arts_size}/${articles.size()} : 1    ]];
    var currentTag = [[ ${currentTag} ]];
    var currentPage = [[ ${pageNum} ]];
    // alert("allPage"+allPage);
    // alert("currentTag"+currentTag);
    for (var i = 1; i <= allPage; i++){
        var loca = "/home/"+currentTag + "?pageNum=" + i;
        var theClass = currentPage == i ? 'hightlight' : '' ;
        var li = $("<li></li>").append($("<a></a>").attr("href",loca).addClass(theClass).text(i));
        li.appendTo("#pageNav");
        // th:class="${currentTag} == ${tag.getId()} ? 'hightlight
    }
</script>

6.循环输出

循环tags集合,每个tag对象对应一个option

<select style="padding: 8px;">
    <option>NONE</option>
    <option th:each="tag:${tags}">[[ ${tag.getName()}]]</option>
</select>

7.自定义属性

th:attr自定义属性

<a href="javascript:void(0);" id="modify" th:attr="tagid=${tag.getId()}">编辑</a>
<script language='javascript' th:inline="javascript">
    $("#modify").click(function(){
        alert($(this).attr("tagid"));
    });
</script>

8.时间格式化

${#dates.format(a,‘yyyy-MM-dd HH:mm:ss’)}

th:text="${#dates.format(article.getCreateTime(),'yyyy-MM-dd HH:mm:ss')}"

9.复杂表达式运算

${一个大括号外包即可}

<a href = "@{ '/home/' + ${currentTag} + '?pageNum=' + ${ arts_size % pageSize == 0 ? arts_size/pageSize : arts_size/pageSize + 1 }  } "></a>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值