Thymeleaf常用th标签
关键字功能介绍案例
th:id替换id<input th:id="'xxx' + ${collect.id}"/>
th:text文本替换,包括html标签
若home.welcome=Welcome to our <b>fantastic</b> grocery store!
用<p th:text="#{home.welcome}"></p>解析结果为:
<p>Welcome to our <b>fantastic</b> grocery store!</p>
th:utext文本替换,html标签会显示出正确的样式<p th:utext="#{home.welcome}"></p>即可。
   Welcome to our fantastic grocery store!
等效于html :<p>Welcome to our <b>fantastic</b> grocery store!</p>
th:object替换对象

用于表单数据对象绑定,将表单绑定到后台controller的一个JavaBean参数。常与th:field一起使用进行表单数据绑定。
例如:

public class LoginBean implements Serializable{
    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public String login(@ModelAttribute(value = "loginBean") LoginBean    loginBean,ModelMap model) {...}
}

<form id="login-form" th:action="@{/login}" th:object="${loginBean}">...</form>

 

th:value属性赋值<input th:value = "${user.name}" />
th:with定义局部变量。
<div th:with="firstPer=${persons[0]}">
  <p>
    The name of the first person is <span th:text="${firstPer.name}">Julius Caesar</span>.
  </p>
</div>

当th:with被处理,firstPer变量创建一个局部变量和变量添加到map自上下文,
以便它是用于评估和其他上下文中声明的变量从开始,但只有包含< div >标记的范围内。

如果定义多个局部变量

<div th:with="firstPer=${persons[0]},secondPer=${persons[1]}">

th:style设置样式<div th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"></div>
th:onclick点击事件<td th:onclick = "'getCollect()'"></td>
th:each属性赋值<tr th:each = "user,userStat:${users}">
th:if判断条件<a th:if = "${userId}"> 如果userId不为空就执行a标签
th:unless和th:if判断相反<a th:href="@{/login} th:unless=${session.user != null}">Login</a>
th:href链接地址<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:switch多路选择配合th:case使用
<div class="col-sm-9">
    <div th:switch="${channel.enable}">
        <p th:case="'1'">
            <input id="enable" name="enable" type="radio" class="ace" value="1" checked="checked" />
            <span class="lbl">启用</span>
            <input id="enable1" name="enable" type="radio" class="ace" value="0" />
            <span class="lbl">停用</span>
        </p>
        <p th:case="'0'">
            <input id="enable2" name="enable" type="radio" class="ace" value="1" />
            <span class="lbl">启用</span>
            <input id="enable3" name="enable" type="radio" class="ace" value="0" checked="checked" />
            <span class="lbl">停用</span>
        </p>
    </div>
</div>

 

th:fragment自定义片段

定义fragment
所有的fragment可以写在一个文件里面,也可以单独存在,例如

    <footer th:fragment="copy">  
       the content of footer
    </footer>
fragment的引用

    th:insert:保留自己的主标签,保留th:fragment的主标签。
    th:replace:不要自己的主标签,保留th:fragment的主标签。
    th:include:保留自己的主标签,不要th:fragment的主标签。(官方3.0后不推荐)

    导入片段:
    <div th:insert="footer :: copy"></div>  
     
    <div th:replace="footer :: copy"></div>  
     
    <div th:include="footer :: copy"></div>
     
    结果为:
    <div>  
        <footer>  
           the content of footer   
        </footer>    
    </div>    
     
    <footer>  
        the content of footer
    </footer>    
     
    <div>  
        the content of footer
    </div> 

th:replace=”thymeleaf的根目录+片段的html名+ :: +自定义的片段名”

th:include布局标签,替换内容到引入的文件 
th:replace  
th:selectdselected选择框选中th:selected="(${xxx.id} == ${configObj.dd})"
th:src图片类地址引入<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
th:inline定义js脚本可以使用变量<script type="text/javascript" th:inline="javascript">
th:action表单提交的地址<form action="subscribe.html" th:action="@{/subscribe}">
th:remove删除某个属性<tr th:remove="all">
1.all:删除包含标签和所有的孩子。
2.body:不包含标记删除,但删除其所有的孩子。
3.tag:包含标记的删除,但不删除它的孩子。
4.all-but-first:删除所有包含标签的孩子,除了第一个。
5.none:什么也不做。这个值是有用的动态评估。
th:attr设置标签属性,多个属性可以用逗号分隔比如 th:attr="src=@{/image/aa.jpg},title=#{logo}",此标签不太优雅,一般用的比较少。

 

 

 

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐