Thymeleaf常用属性

「这是我参与11月更文挑战的第3天,活动详情查看: 2021最后一次更文挑战 」。

1、 th:each 对象遍历

常用标签,类似于JSTL中的 c:forEach ,该属性循环遍历 集合 数组 Map ,下面以一个list集合来介绍 th:each 属性标签

 <tr th:each="u:${list}">  //${list}是后台传过来的key , u是${list}定义遍历名称。
        <td th:text="${uStat.count}">ID</td>  //uStat是循环体的信息。
        <td th:text="${u.name}">姓名</td>     //对象的属性信息
        <td th:text="${u.age}">年龄</td>      //对象的属性信息
        <td th:text="${u.sex}">性别</td>      //对象的属性信息
        <td>操作</td>
  • th:each="u:${list} 标签使用,循环体的信息获取默认是名称+stat,同时也可以自定义名称,中间以,号分隔。
  •  例如: th:each="u,i:${list}"

  • 循环体可以获取信息有:  index 当前迭代对象的index(0)开始
  •  size ---迭代对象大小

     count ---(从1开始),常用于显示列表,从1开始排序

     current ---(当前迭代变量)

     even/odd ---布尔值(是否是偶数/奇数  0开始)

     first ---布尔值 是否是第一个

     last ---布尔值 是否是最后一个

    以上循环体信息均可以通过th:each标签

    2、 th:if

    <span th:if="${u.sex==1}"></span> <span th:if="${u.sex==0}"></span>

    3、 th:switch 和 th:case

    th:switch ---多路选择,配合th:case 使用

    th:case ---th:switch的一个分支

    如下示例,实现对状态码进行选择,th:case="*"的意思与other的意思相近。

     <h1>switch示例</h1>
        <div th:switch="${status}">
            <span th:case="1">有效</span>
            <span th:case="2">无效</span>
            <span th:case="3">黑名单</span>
            <span th:case="*">其他</span>
        </div>
    

    4、 th:src

    th:src标签,用于外部资源引入, 比如<script>标签的 src 属性, <img>标签的 src 属性,常与@{}表达式结合使用。

    <img src="/images/1.jpg" th:src="@{/images/1.jpg}" /> 外部JS文件: <script type="text/javascript" src="js/jquery.min.js" th:src="@{/js/page.js}"></script>

    <script src>属性和<img src>属性常与@{}组合使用 常用于动态资源数据获取(绝对路径)

    5、th:id/name/value

    为属性赋值,替换 html 标签中的 id,name,value 属性

    <input type="text" th:text="${msg}"/>
    <input type="text" th:text="${msg}" th:value="${msg}"/>
    

    6、th:attr

    设置标签属性,该属性也是用于给 HTML 中某元素的某属性赋值,优点是可以给 html 中没有定义的属性动态的赋值。多个属性可以用逗号分隔

    可以通过该属性为某个name赋动态名称

    //给 value和src赋值
    <input type="text"  th:attr="value=${msg},src=@{/image/aa.jpg}" />
    //给 name和src赋值
    <input type="text"  th:attr="name=${msg},src=@{/image/aa.jpg}" />
    

    7、th:insert 和 th:replace的区别

    th:insert和th:replace都可以引入片段,用的方式是一样的,两者的区别在于:

    th:insert: 保留引入时使用的标签

    th:replace:不保留引入时使用的标签, 将声明片段直接覆盖当前引用标签

    8、 th:inline

    (1)内敛文本(th:inline=”text”) 内敛文本表达式不依赖于 html 标签,直接使用内敛表达式[[表达式]]即可获取动态数据(相当于是加了两个方括号的EL表达式了), 但必须要求在父级标签上加 th:inline = “text”属性 注意:一般我们将内联文本放到标签中

    (2)内敛脚本(th:inline=”javascript”)

    th:inline="javascript"用于 js 代码中获取后台的动态数据

    9、优先级顺序

    因为Thymeleaf标签有非常多,这里只列出最常用的几个;由于一个标签内可以包含多个th:x属性,其生效的优先级顺序为: include,each,if/unless/switch/case,with,attr/attrprepend/attrappend,value/href,src ,etc,text/utext,fragment,remove。

    分类:
    前端
  •