[JAVA EE] 内联用法
生活随笔
收集整理的這篇文章主要介紹了
[JAVA EE] 内联用法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
（1）內聯表達式
有些情況下更喜歡將表達式直接寫入到 HTML 文本中。
內聯表達式：<p>Hello, [[${stu.name}]]</p>
或者這樣寫：<p>Hello, <span th:text="${stu.name}"></span></p>
內聯表達式用法
? [[…]] 等價于 th:text，結果被HTML轉義
? [(…)] 等價于 th:utext，結果不執行任何HTML轉義
“[[”、"]]"、"[("、")]" 連在一起寫，不能有空格
- 后臺代碼
@RequestMapping("/th")public String index(Model model) {model.addAttribute("msg", "Love you <b>中國</b>！");return "th/index";}
- 前端代碼
<body><p>hello, [[${msg}]]</p><p>hello, [(${msg})]</p></body>
- 運行結果
禁用內聯
? 實際應用中想輸出 [[…]] 或 [(…)]
? th:inline = "none" 來禁用內聯
<body><p th:inline = "none" >hello, [[${msg}]]</p><p th:inline = "none" >hello, [(${msg})]</p>
</body>
運行結果：
內聯 JS
? JS 無法獲取服務端返回的變量，通過內聯就可以獲取。
? 在 <script> 標簽中添加 th:inline ="javascript" 來啟用內聯 JS。
? JS 內聯表達式常用：[[${xx}]]
注：內聯JS只能用在HTML文件內部的JS代碼，不能識別引入的外部JS里面的內聯表達式。
- 控制器代碼
@RequestMapping("/edit")public String edit( Model model){Student s=new Student(2019001,"小明");model.addAttribute("stu",s);model.addAttribute("msg", "Love you <b>中國</b>！");return "th/form";}
- 前端代碼
<body><script th:inline="javascript">var id = [[${stu.id}]] ;var name = [[${stu.name}]] ;var msg = [[${msg}]] ;//var msg = [(${msg})] //會報錯console.log(id, name, msg);</script>
</body>
- 運行結果
內聯 CSS
? 在 <style > 標簽添加th:inline="css"開啟內聯 CSS。
? CSS 內聯表達式常用：[(${xx})]
與內聯 JS 一樣，內聯 CSS 同樣只能在 HTML 內嵌的
<style>標簽中進行使用不能在外部導入的 CSS 文件中進行使用。
- 控制器代碼
@RequestMapping("/edit")public String edit( Model model){model.addAttribute("width","200px");model.addAttribute("bg","#f6f6f6");return "th/form";}
- 前端代碼
<body><style th:inline="css">p {width: [(${width})] ;background-color: [(${bg})] ;}</style><p th:text="${stu.id}">學號</p><p th:text="${stu.name}">姓名</p>
</body>
- 運行結果
總結
以上是生活随笔為你收集整理的[JAVA EE] 内联用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [JAVA EE] Thymeleaf
- 下一篇： [JAVA EE]Spring Boot