• 三、thymeleaf基本语法

    3.1、基本语法

    3.1.1变量表达式：${...}

    变量表达式用于在页面中输出指定的内容，此内容可以是变量，可以是集合的元素，也可以是对象的属性。主要用于填充标签的属性值，标签内的文本，以及页面中js变量的值等。

    1、显示文本内容

    把变量表达式放在一对嵌套的中括号中“[[]]”，可以用于输出标签之间的文本，也可用于给js变量赋一个静态的值。

    如果文本是一段HTML标签，在页面输出时会进行转义，并不会添加成子标签。

    示例

    在TestServlet的doPost方法的request对象中添加两个字符串属性“title”和“msg”，其中“msg”是一个标签的脚本。

    1. request.setAttribute("title", "这是一个字符串");
    2. request.setAttribute("msg", "
    3. 这是一个字符串
    4. ");

    在index.html中输出此属性的值

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>[[${title}]]</title>
    6. </head>
    7. <body>	 
    8. <div>[[${msg}]]</div>	 	
    9.  <script type="text/javascript">	
    10. 	alert('[[${title}]]')	</script></body></html>

    运行test.do，页面会输了此属性的值

    点击“对话框”的"确定"后在页面显示的是转义后的内容。

    如果需要加载为HTML标签，可以使用[()]

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8"><title>[[${title}]]</title>
    5. </head>
    6. <body>
    7. 	 <div>[(${msg})]</div>	
    8.  </body>
    9. </html>

    运行test.do，页面会输了此属性的值

    2、标签属性值的赋值

    要在标签属性上使用表达式，属性名前必须使用"th:"标识。thymeleaf几乎对所有的标签属性都进行了重定义，使每个属性都可以使用"th:"标签来进行动态赋值。

    示例

    在testServlet的情况中增加一个属性，用于设置字体的颜色

    request.setAttribute("color", "color:red;");

    在test.html中添加一个div标签，标签上添加"th:style"和“th:utext”属性。注意属性“th:utext”和“th:text”的区别，“th:utext”一般用于在标签内容添加HTML子元素，“th:text”用于输出文本内容，此属性与[[${}]]的作用相同。

    <div th:style="${color}" th:utext="${msg}"></div>

    运行test.do，页面显示效果如下

    3、通过属性赋值

    在一些业务中，某个属性可能需要根据条件来判断是否添加，比如checkbox的checkbox属性，input的readonly等。此时可以使用"th:attr"属性

    示例：

    在WebContent创建img目录，复制一张图片到此目录中，重命名为“test.xxx”，

    在TestServlet的request中添加属性，保存此图片的路径

    request.setAttribute("url", "/img/test.jpg");

    在test.html中添加img标签，标签使用"th:attr"给src属性赋值

    <img th:attr="src=@{${url}}"  width="200"/>

    运行test.do，页面显示效果如下

    “th:attr”也可以同时给多个属性赋值，比如图片的路径和宽度

     文章来源于哔站《三、thymeleaf基本语法》

    更多学习视频和专栏文章请到哔站个人空间： 布道师学院的个人空间-布道师学院个人主页-哔哩哔哩视频

    更多资源和项目下载请到：”开源吧（找实战项目和毕设项目的好网站）“ ​ ：开源吧

    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
vue3+vite：动态引入静态图片资源                            
    
文件管理：目录管理                            
    
食品商城网站设计—食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作                            
    
基于Java+SpringBoot+Vue前后端分离在线互动学习网站设计和实现                            
    
笔记本电脑蓝牙怎么用来连接耳机                            
    
C++启航跟沸羊羊有关系吗？                            
    
子序列（All in All, UVa 10340）rust解法                            
    
【附源码】计算机毕业设计java学生社团管理系统设计与实现                            
    
strongswan：configure: error: OpenSSL Crypto library not found                            
    
程序员们保住自己饭碗                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/ouyangqing/article/details/133563512
                
    •