當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端笔记-利用thymeleaf隐藏显示input及label

發布時間：2025/3/15 HTML 20 豆豆

生活随笔收集整理的這篇文章主要介紹了前端笔记-利用thymeleaf隐藏显示input及label 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

先來看看效果：

這里有一個add.html，添加，修改都使用這個文件，當點擊添加后：

add.html被構造成這樣（點擊添加后）：

當點擊編輯后：

對應的前端源碼如下：

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" /><link rel="stylesheet" type="text/css" href="#" th:href="@{/bg/my.css}" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /><meta name="description" content="" /><meta name="author" content="" /><title>考勤管理系統</title><link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet" /> `<link href="asserts/css/dashboard.css" th:href="@{/asserts/css/dashboard.css}" rel="stylesheet" /><style type="text/css">/* Chart.js */@-webkit-keyframes chartjs-render-animation {from {opacity: 0.99}to {opacity: 1}}@keyframes chartjs-render-animation {from {opacity: 0.99}to {opacity: 1}}.chartjs-render-monitor {-webkit-animation: chartjs-render-animation 0.001s;animation: chartjs-render-animation 0.001s;}</style> </head><body><div class="container-fluid"><div class="row"><div th:replace="commons/bar::#sidebar(activeUri='super')"></div><main class="main ui container"><div class="ui grid"><div class="one wide column"></div><div class="fifteen wide column"><form th:action="@{/admin/add}" method="post"><input type="hidden" name="_method" value="put" th:if="${people!=null}"/><input type="hidden" name="id" th:if="${people!=null}" th:value="${people.id}"/><div class="form-group"><label>用戶名</label><input name="account" type="text" class="form-control" placeholder="root"th:value="${people!=null}?${people.id}" th:readonly="${people!=null} ? 'true':'false'" /></div><div class="form-group"><label>密碼</label><input name="password" type="password" class="form-control" placeholder="123456"th:value="${people!=null}?${people.pwd}" /></div><div class="form-group"><label>是否激活</label><br/><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="active" value="1"th:checked="${people!=null}?${people.active==1}" /><label class="form-check-label">是</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="active" value="0"th:checked="${people!=null}?${people.active==0}" /><label class="form-check-label">否</label></div></div><div class="form-group"><label th:style="${people==null} ? 'display: none' : ''">修改時間</label><input th:type="${people!=null} ? 'text' : 'hidden'" class="form-control" placeholder="2020/3/12 "th:value="${people!=null}?${#dates.format(people.modifyTime, 'yyyy-MM-dd hh:mm:ss')}" readonly="readonly" /></div><div class="form-group"><label th:style="${people==null} ? 'display: none' : ''">創建時間</label><input th:type="${people!=null} ? 'text' : 'hidden'" class="form-control" placeholder="2020/3/12"th:value="${people!=null}?${#dates.format(people.createTime, 'yyyy-MM-dd hh:mm:ss')}" readonly="readonly" /></div><button type="submit" class="btn btn-primary" th:text="${people!=null}?'修改':'添加'">添加</button><p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p></form></div></div></main></div> </div><script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script> <script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{/webjars/popper.js/1.11.1/dist/popper.js}"></script> <script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.js}"></script><script type="text/javascript" src="#" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script></body></html>

首先要知道個知識點：

input隱藏使用type="hidden"

label隱藏使用display: none

這里可以通過后端是否發來了model，如果有model說明是編輯界面，如果沒有model說明是添加！

然后進行對應的顯示，隱藏即可：

總結

以上是生活随笔為你收集整理的前端笔记-利用thymeleaf隐藏显示input及label的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：前端笔记-thymeleaf获取及回显i
下一篇： Qt文档阅读笔记-QML Rotatio