Thymeleaf表达式讲解(二)

Leefs 2019-11-06 AM 1544℃ 0条

### 四、Thymeleaf常见属性
**Map集合的展示和遍历**

> 后台Controller层的代码

```java
@RequestMapping("/index")
public String index(Model model){
    //Map集合
    Map<String,Object> userMap = new HashMap<>();

for(int i=0;i<10;i++){
        User user1 = new User();
        user1.setId(i);
        user1.setNick("李林超博客"+i);
        user1.setPhone("12344556"+i);
        user1.setEmail(i+"996@163.com");
        user1.setAddress("北京朝阳区"+i);
        userMap.put(String.valueOf(i),user1);
    }
    model.addAttribute("userMap",userMap);

return "index";
}
```

> 前台页面代码

```html
<p th:each="user2:${userMap}">
    <span th:text="${user2.key}">X</span>
    <span th:text="${user2.value.nick}">X</span>
    <span th:text="${user2.value.phone}">135632XXXXXX</span>
    <span th:text="${user2.value.email}">xxxx@163.com</span>
    <span th:text="${user2.value.address}">北京XXX</span>
</p>
```

**user2.key:**取出Map集合中KEY值

**user2.value.xxx:**取出Map集合中Value值

3. 3.`th:id`:类似html标签中的id属性

```html
   <span th:id="${hello}">aaa</span>
   ```

普通Id属性

```html
   <span id="hello">aaa</span>
   ```

当id是后台传过来的动态Id时使用Thymeleaf中的`th:id`,平时使用普通id属性就可

4. 4.`th:if`:条件判断，比如后台传来一个变量，判断该变量的值

> 后台代码

```java
model.addAttribute("sex",1);
```

> 前台代码

```html
<p>
    <span th:if="${sex eq 1}">
        男
    </span>
    <span th:if="${sex eq 2}">
        女
    </span>
</p>
<p>
    <span th:if="${sex == 1}">
        男
    </span>
    <span th:if="${sex == 2}">
        女
    </span>
</p>
```

其中，`eq`和`==`在此处的作用是相同的

5. 5.`th:unless`:是`th:if`的一个相反操作

> 前端代码

```html
<p>
    <span th:unless="${sex eq 1}">
        男
    </span>
    <span th:unless="${sex eq 2}">
        女
    </span>
</p>
<p>
    <span th:unless="${sex == 1}">
        男
    </span>
    <span th:unless="${sex == 2}">
        女
    </span>
</p>
```

后端代码和**th:if**相同，输出结果和**th:if**相反。

6. 6.`th:switch/th:case`:switch、case判断语句

> 前端代码

```html
<p th:switch="${sex}">
    <span th:case="1">男</span>
    <span th:case="2">女</span>
    <span th:case="*">保密</span>
</p>
```

后端代码和**th:if**相同

一旦某个case判断值为true,剩余的case则都当做false,“`*`”表示默认的case,前面的case都不匹配时候，执行默认的case；

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

```html
<script th:src="@{/js/jquery-2.4.min.js}"></script>
<img th:src="@{/image/logo.png}"/>
```

8. 8.`th:text`:用于文本的显示

```html
<input type="text" id="msg" name="msg" th:text="${msg}"/>
```

9. 9.`th:value`:类似与html标签中的value属性，能对某元素的value属性进行赋值

```html
<input type="hidden" id="phone" name="phone" th:value="${user.phone}"/>
```

10. 10.`th:attr`:该属性也是用于给HTML中某元素的某属性赋值

```html
<input type="hidden" id="address" name="address" th:attr="value='${user.address}'"/>
```

```java
<span data-ref="login"></span>           -- ①
<span th:attr="data-ref=login"></span>   -- ②
```

其中①和②是等价关系，②中的值login也可换成动态值

11. 11.`th:onclick`:点击事件

```html
<span th:attr="data-ref=${user.phone}" th:onclick="'clickMe()'">点击事件</span>
<script>
    function clickMe(){
        alert("click");
    }
</script>
```

12. 12.`th:style`:设置样式

```html
<div th:style="'display:block;'">
    李林超博客
</div>
```

13. 13.`th:method`:设置请求方法

```html
<form id="login" th:action="@{/login}" th:method="post">
.......
</form>
```

14. 14.`th:name:`设置表单名称

```html
<input th:type="text" th:id="${user.nick}" th:name="${user.nick}">
```

15. 15.`th:inline`:内联文本、内联脚本

th:inline有三个取值类型(text、javascript和none)

该属性使用内联表达式`[[...]]`展示变量数据

```html
<div th:inline="text">
    [[${user.phone}]]
</div>
<div th:inline="none">
    [[${user.phone}]]
</div>
<div>
    [[${user.phone}]]
</div>
```

`th:inline`写在任何父标签都可以

```html
<body th:inline="text">
    <span>[[${user.phone}]]</span>
</body>
```

内联脚本中JavaScript获取后台的动态变量

```html
内联脚本：
<script th:inline="javascript" type="text/javascript">
    var user = [[${user.phone}]];
    alert(user);
</script>
<script th:inline="javascript" type="text/javascript">
    var msg = "hello,"+ [[${user.phone}]];
    alert(msg);
</script>
```

标签: Java, SpringBoot, Thymeleaf

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://lilinchao.com/archives/132.html

上一篇在方法和作用域内的内部类

下一篇 Vue基础入门学习(一)

Thymeleaf表达式讲解(二)

评论啦~

栏目分类

标签云

友情链接申请

Thymeleaf表达式讲解(二)

 评论啦~

 栏目分类

标签云

友情链接申请

评论啦~

栏目分类

标签云

友情链接申请