Thylemeaf 新手记录

Thymeleaf 在使用中和 小程序 有一定程度的相似，如果是先学 小程序 再学 Thymeleaf 的话应该难度不大

 

	Thymeleaf	小程序
循环	th:each	wx:for
判断	th:if	wx:if
数据	${data}	{{data}}

 

小程序在标签的使用上与普通html的区别除了标签名有变化外，没有特别多的改变，属性基本可以按照html的方式写。

而thymeleaf，恕我直言，感觉所有的标签属性都可以用th:加属性名修改，小程序直接修改属性值，thymeleaf则是将旧属性覆盖，然后再赋值（个人理解），类似于一些UI框架，将原有的标签隐藏然后写一个自己样式的标签，以此改变固有样式。

 

在使用上常用的不多，记住几个基本用法就可以了。

1.th:text

th:text可以写在很多需要写文本的标签中如：

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

<span th:text="${span.content}"></span>

2.th:each

th:each在使用时挺有意思，假设后台返回的数据是数组

{
    "user":[
        {
            "name":"春井",
            "age":20
        },
        {
            "name":"俊赫",
            "age":22
        },
        {
            "name":"伊丽莎白",
            "age":24
        }
    ]
}

在遍历user时

<div th:each="active:${user}">

    <span th:text="${active.name}"></span>

    <p th:text="${active.age}"></p>

</div>

这里的each可以理解为jq中的   $.each(  user  ,  function  ( i , item ) {  }  )

active就是item，为遍历的当前元素

3.th:href

在修改a标签的href地址时，不能再使用${}的格式，使用的是@{路径}

这里写两种例子

①路径结尾传参数

eg:  ' / order / details ? userId = 1 '

<a href="details.html"  th:href=" @ { / order / details ( userId = ${ user.id } ) } "></a>

②路径中是变量

eg: ' / order / user / 1 /details '

<a href="details.html"  th:href=" @ { / order / { userId } / details ( userId = ${ user.id } ) } "></a>

 

 

 

下面有一个比较全面的功能，需要的时候看一下就可以，全记住就只能喊666了。