Thymeleaf常用属性

th:each

该属性较为常用，比如从后台传来一个对象集合那么就可以使用此属性遍历输出，它与JSTL中的<c: forEach>类似，此属性既可以循环遍历集合，也可以循环遍历数组及Map。

循环list

controller构建list数据：

@RequestMapping(value="/users")
public String selectAllUser (Model model) {

    ArrayList<User> userList = new ArrayList<>();
    for (int i = 0; i < 10; i++) {
        User user = new User();
        user.setId(i);
        user.setName("jack" + i);
        user.setPhone("13"+i+"11111111");
        userList.add(user);
    }

    model.addAttribute("userList", userList);
    return "user";
}

HTML：

这里的interStat类似于jstl里面foreach的varStatus，可以获取到当前的迭代信息。

<table>
    <tr th:each="user, interStat : ${userList}">
        <td th:text="${interStat.index}"></td>
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.phone}"></td>
    </tr>
</table>

interStat里面一些属性的含义：

index: 当前迭代对象的index（从0开始计算）
count: 当前迭代对象的个数（从1开始计算）
size: 被迭代对象的大小
current: 当前迭代变量
even/odd: 布尔值，当前循环是否是偶数/奇数（从0开始计算）
first: 布尔值，当前循环是否是第一个
last: 布尔值，当前循环是否是最后一个

循环map

controller构建map数据：

@RequestMapping(value="/usersMap")
public String selectAllUserMap (Model model) {

    HashMap<String, User> userMap = new HashMap<>();
    for (int i = 0; i < 10; i++) {
        User user = new User();
        user.setId(i);
        user.setName("jack" + i);
        user.setPhone("13"+i+"11111111");
        userMap.put(String.valueOf(i), user);
    }

    model.addAttribute("userMap", userMap);
    return "user";
}

HTML：

myMapVal.key相当于map的键，myMapVal.value相当于map中的值。

<div th:each="myMapVal : ${userMap}">
    <span th:text="${myMapValStat.count}"></span>
    <span th:text="${myMapVal.key}"></span>
    <span th:text="${myMapVal.value.name}"></span>
    <span th:text="${myMapVal.value.phone}"></span>
    <br/>
</div>

循环数组

controller构建数组数据：

@RequestMapping(value="/usersArray")
public String selectAllUserArray (Model model) {

    User[] userArray = new User[10];

    for (int i = 0; i < 10; i++) {
        User user = new User();
        user.setId(i);
        user.setName("jack" + i);
        user.setPhone("13"+i+"11111111");
        userArray[i] = user;
    }

    model.addAttribute("userArray", userArray);
    return "user";
}

HTML：

<div th:each="myArrayVal : ${userArray}">
    <div th:text="${myArrayVal.name}"></div>
    <div th:text="${myArrayVal.phone}"></div>
</div>

th:id

动态设置html标签中的id属性，比如：

<span th:id="${hello}">good</span>

这样会获取从后台传入的hello的值，然后将这个值作为id的值。

th:if

条件判断，比如后台传来一个变量，判断该变量的值，0为男，1为女：

<span th:if="${sex} == 0" >
    男：<input type="radio" name="sex"  th:value="男" />
</span>
<span th:if="${sex} == 1">
    女：<input type="radio" name="sex" th:value="女"  />
</span>

th:switch/th:case

switch，case判断语句，比如：

<div th:switch="${sex}">
  <p th:case="0">性别：男</p>
  <p th:case="1">性别：女</p>
  <p th:case="*">性别：未知</p>
</div>

这里的*表示默认，当上面的case都是false的时候，会执行默认的内容。

th:value

类似html标签中的value属性，能对某元素的value属性进行赋值，比如：

<input type="hidden" id="userId" name="userId" th:value="${userId}">

th:inline

th:inline有三个取值类型

• text

  从后台取出数据展示

  <span th:inline="text">Hello, [[${user.nick}]]</span>
  等同于：
  <span>Hello, <span th:text="${user.nick}"></span></span>
  

• none

  有时候希望在html中直接显示[[1,2,3],[4,5]],此时可以使用none

  <p th:inline="none"> [[1, 2, 3], [4, 5]]!</p>
  

• javasript

  如果希望在JavaScript中获取后台相应的数据，可以使用下面内容：

  <script th:inline="javascript" type="text/javascript">
        var msg  = "Hello," + [[${user.phone}]];
        alert(msg);
  </script>