[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 高级用法：模板布局，带参数的引用片段，表单验证，常用校验注解
模板布局公共部分通常定义为模板布局:如页眉,页脚,公共导航栏.菜单等. 模板布局定义方法布局页中用 th:fragment 定义模板片段,其他页面用 th:insert 引用片段例如:foote ...
[JAVA EE] JPA 查询用法:自定义查询,分页查询
项目已上传:https://codechina.csdn.net/qq_36286039/javaee 自定义查询问题:内置的crud功能不满足需求时如何添加自定义查询? 几种自定义查询方法方法命 ...
JAVA(JNA)内联汇编之外挂编写()
MyKernel32类 [java] view plaincopyprint? package com.jna; import com.sun.jna.Native; import com.sun.j ...
JAVA(JNA)内联汇编之外挂编写(魔域宝宝出征CALL)
需要外部包 jna.jar LocalOS_src.jar MyKernel32类 package com.jna; import com.sun.jna.Native; import com.sun ...
java 内联调用深度_Java中内联虚拟方法调用的性能
java 内联调用深度总览动态编译的好处之一是它能够支持在虚拟方法代码上的广泛方法内联. 内联代码可提高性能时,代码仍必须检查类型(以防由于优化而更改了类型)或在多个可能的实现之间进行选择. 这导 ...
Java内联虚拟方法调用的性能
总览动态编译的好处之一是,它能够支持在虚拟方法代码上进行广泛的方法内联. 虽然内联代码可以提高性能,但是代码仍然必须检查类型(以防由于优化而更改了类型)或在多个可能的实现之间进行选择. 这导致了问题 ...
java内联函数_Java之内联函数_内联函数的优缺点
描述内联函数 1.内联函数就是指函数在被调用的地方直接展开,编译器在调用时不用像一般函数那样,参数压栈,返回时参数出栈以及资源释放等,这样提高了程序执行速度. 2.Java语言中有一个关键字fina ...
html中内联元素和块元素的区别、用法以及联系
昨天用asp.net的BulletedList做一个导航栏,最终该控件形成的html代码是ul列表和a超链接,具体代码如下: <ul id="BulletedList1" s ...
【Kotlin】apply 内联扩展函数 ( apply 函数原型 | apply 函数示例 | Kotlin 调用 Java API )
文章目录 I . 内联扩展函数 apply II . Kotlin 调用 Java API III . apply 内联扩展函数示例 ( 调用 Java API 处理图像 ) I . 内联扩展函数 a ...