欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Springboot Thymeleaf實現HTML屬性設置

 更新時間:2020年04月23日 14:47:41   作者:gdjlc  
這篇文章主要介紹了Springboot Thymeleaf實現HTML屬性設置,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

使用Thymeleaf的屬性來設置HTML屬性。

(1)使用th:attr屬性可以修改原來HTML節(jié)點的屬性;

(2)th:attr屬性可以同時設置多個屬性;

(3)每一個HTML屬性都有對應的Thymeleaf屬性,如th:attr="value='值'"可換為th:value="值"

(4)HTML的type為checkbox、readonly、required、disabled的,Thymeleaf屬性可寫為th:checked="true/false"形式;

(5)使用th:attrappend和th:attrprepend分別在HTML屬性的后面或前面加入數據;

(6)使用th:styleappend和th:classappend分別向原有style、class屬性添加樣式;

(7)HTML5自定義屬性以“data-”作為前綴,Thymeleaf同樣支持自定義屬性,例如可以使用“data-th-text”代替 “th:text”,使用“data-th-each”代替“th:each”;

開發(fā)環(huán)境:IntelliJ IDEA 2019.2.2

Spring Boot版本:2.1.8

新建一個名稱為demo的Spring Boot項目。

1、pom.xml

加入Thymeleaf依賴

  <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-thymeleaf</artifactId>
  </dependency>

2、src/main/java/com/example/demo/TestController.java

package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class TestController {
 @RequestMapping("/")
 public String test(){
  return "test";
 }
}

3、src/main/resources/templates/test.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<form th:id="form1" th:attr="method='post',action=@{/user/save}">
 <input type="text" value="值1" th:value="值2" />
 <input type="text" th:readonly="true" />
 <input type="text" th:disabled="true" />
 <input type="checkbox" th:checked="true" />
 <input type="checkbox" th:checked="false" />
 <div id="div1" th:attrappend="id='-data'" style="text-align: center;" th:styleappend="'color:#ccc'"></div>
 <div id="div2" th:attrprepend="id='data-'" class="class1" th:classappend="class2"></div>

 <input id="user" type="text" data-person-name="lc" data-age="30"/>
 <div data-th-text="hello"></div>

 <script>
  var obj = document.getElementById("user");
  //獲取HTML5屬性值的2種方式,用dataset方式時,如果名稱帶連字符則使用時需駝峰化
  var s = obj.dataset.personName + "," + obj.getAttribute("data-age");
  alert(s);
 </script>

</form>

</body>
</html>

瀏覽器訪問:http://localhost:8080

頁面彈出:lc,30

右鍵查看網頁源代碼,生成的HTML源碼:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<form id="form1" method="post" action="/user/save">
 <input type="text" value="值2" />
 <input type="text" readonly="readonly" />
 <input type="text" disabled="disabled" />
 <input type="checkbox" checked="checked" />
 <input type="checkbox" />
 <div id="div1-data" style="text-align: center; color:#ccc"></div>
 <div id="data-div2" class="class1 class2"></div>

 <input id="user" type="text" data-person-name="lc" data-age="30"/>
 <div>hello</div>

 <script>
  var obj = document.getElementById("user");
  //獲取HTML5屬性值的2種方式,用dataset方式時,如果名稱帶連字符則使用時需駝峰化
  var s = obj.dataset.personName + "," + obj.getAttribute("data-age");
  alert(s);
 </script>

</form>

</body>
</html>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • 淺談Mybatis樂觀鎖插件

    淺談Mybatis樂觀鎖插件

    這篇文章主要介紹了淺談Mybatis樂觀鎖插件,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • SpringBoot2使用Jetty容器操作(替換默認Tomcat)

    SpringBoot2使用Jetty容器操作(替換默認Tomcat)

    這篇文章主要介紹了SpringBoot2使用Jetty容器操作(替換默認Tomcat),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • Java中常見的4種限流算法詳解

    Java中常見的4種限流算法詳解

    這篇文章主要介紹了Java中常見的4種限流算法詳解,FixedWindowRateLimiter 類表示一個固定窗口限流器,使用 limit 和 interval 參數分別表示限制請求數量和時間間隔,缺點是短時間內可能會流量翻倍,需要的朋友可以參考下
    2023-12-12
  • mybatis批量新增、刪除、查詢和修改方式

    mybatis批量新增、刪除、查詢和修改方式

    這篇文章主要介紹了mybatis批量新增、刪除、查詢和修改方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2021-09-09
  • java使用短信設備發(fā)送sms短信的示例(java發(fā)送短信)

    java使用短信設備發(fā)送sms短信的示例(java發(fā)送短信)

    這篇文章主要介紹了java使用短信設備發(fā)送sms短信的示例(java發(fā)送短信),需要的朋友可以參考下
    2014-04-04
  • Spring Bean生命周期之Bean的實例化詳解

    Spring Bean生命周期之Bean的實例化詳解

    這篇文章主要為大家詳細介紹了Spring Bean生命周期之Bean的實例化,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-03-03
  • Springboot如何設置過濾器及重復讀取request里的body

    Springboot如何設置過濾器及重復讀取request里的body

    這篇文章主要介紹了Springboot如何設置過濾器及重復讀取request里的body,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • JDK基于CAS實現原子類盤點解析

    JDK基于CAS實現原子類盤點解析

    這篇文章主要為大家介紹了JDK基于CAS實現原子類盤點解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-12-12
  • collection集合體系與并發(fā)修改異常的解決方法

    collection集合體系與并發(fā)修改異常的解決方法

    今天小編就為大家分享一篇關于collection集合體系與并發(fā)修改異常的解決方法,小編覺得內容挺不錯的,現在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
    2019-03-03
  • spring?boot集成smart-doc自動生成接口文檔詳解

    spring?boot集成smart-doc自動生成接口文檔詳解

    這篇文章主要介紹了spring?boot集成smart-doc自動生成接口文檔詳解,smart-doc是一款同時支持java?restful?api和Apache?Dubbo?rpc接口文檔生成的工具,smart-doc顛覆了傳統類似swagger這種大量采用注解侵入來生成文檔的實現方法
    2022-09-09

最新評論