Thymeleaf 内联语法使用教程

1  表达式内联   

        Thymeleaf标准方言允许使用标签属性(th:)来实现很多的功能,但在有些场景之下,需要将表达式直接写入HTML 代码中和CSS代码中及JavaScript代码中【代码和html文件在一起,分能不开,待验证,有验证的朋友可以告诉我一下】,称为内联表达式。例如,我们可能更喜欢这样写:

        <p>Hello, [[${session.user.name}]]!</p >

        在 Thymeleaf 中,[[…]]或之间的表达式[(…)]被视为内联表达式,在它们内部,我们可以使用任何类型的表达式,这些表达式在 ath:text或th:utext属性中也有效。

1.1 内联语法,如下所示:

[[…]]        对应于th:text(结果进行HTML转义,直接输出原内容),

[(…)]        对应于th:utext(不会执行任何HTML转义)。

用途说明
none禁止使用内联表达式,可以原样输入[[]]和[()]字符串
text文本内联表达式,可以使用 th:each 等高级语法
css样式内联,如:<style th:inline=“css">
javascript

服本内联,如:<style th:inline="javascript">

1.2  案例演示:

添加变量msg,这是Java中Control中增加如下代码

model.addAttribute("msg", "这是<b>内联语法使用案例!</b>");

使用内联表达式获取msg,使用两种不同的写法,得到不同的结果,这是在html中的代码

<!--内联表达式-->
<div> [[${msg}]]</div>
<!--内联表达式-->
<div> [(${msg})]</div>

查看结果,[[ ]]进行了转义操作。


2 禁用内联

        th:inline是thymeleaf提供了内联属性,值有三种:text,javascript,none,css。
2. 1 可以th:inline="none"属性禁用内联。

<p th:inline="none">原样输出的内容</p>


2. 2 案例:

<!--内联表达式-->
<div th:inline="none"> [[${msg}]]</div>


3 文本内联

        th:inline=“text”,表示文本内联,和表达式内联功能非常相似,但它实际上增加了更多功能。文本内联可以处理标签主体就好像它们是在TEXT模板模式下处理的模板一样,这允许我们执行基于文本的模板逻辑(不仅是输出表达式)。

        此部分,我待测试验证,后续再更新出来


 4 JavaScript 内联

        使用JavaScript内联,可以在script脚本中直接使用内联表达式获取模型中的数据,就当做js代码使用,这个功能十分强大。

4.1 使用语法:<script type="text/javascript th:inline="javascript">
        注:必须使用th:inline="javascript"以下命令显式启用此模式:

    <!-- javascript内联--><script type="text/javascript" th:inline="javascript">let users =[[${list}]];for(let index =0;index<users.length;index++){console.log(users[index].username)}</script>

        高级内联和 JavaScript 序列化:关于 JavaScript 内联,需要注意的重要一点是,这种表达式评估是智能的,并且不仅限于字符串。Thymeleaf 将正确地用 JavaScript 语法编写以下类型的对象:字符串,数字,布尔值,数组,List,Map,Beans(具有getter和setter方法的对象)
例如,如果我们有以下代码:

<script th:inline="javascript">...var user = /*[[${session.user}]]*/ null;...
</script>

        该${session.user}表达式将计算为一个User对象,并且 Thymeleaf 将正确地将其转换为 Javascript 语法:

<script th:inline="javascript">...var user = {"age":null,"firstName":"John","lastName":"Apricot","name":"John Apricot","nationality":"Antarctica"};...
</script>

JavaScript 序列化的完成方式是通org.thymeleaf.standard.serializer.IStandardJavaScriptSerializer接口的实现,可以StandardDialect在模板引擎使用的实例中进行配置。

        此 JS 序列化机制的默认实现将在类路径中查找Jackson 库,如果存在,将使用它。如果不是,它将应用内置的序列化机制,该机制涵盖了大多数场景的需求并产生了类似的结果(但灵活性较差)。


5 CSS 内联

        Thymeleaf 还允许在 CSS< style>标签中使用内联,
        语法:<style th:inline="css">...</style>
例如:

<style th:inline="css">...
</style>

例如,假设我们将两个变量设置为两个不同的String值:

classname = 'main elems'
align = 'center'
我们可以像这样使用它们:

<style th:inline="css">.[[${classname}]] {text-align: [[${align}]];}
</style>

结果将是:

<style th:inline="css">.main\ elems {text-align: center;}
</style>

     注意: CSS 内联如何也具有一些智能,就像 JavaScript 一样。具体来说,通过转义表达式输出的表达式[[${classname}]]将被转义为CSS 标识符。这就是为什么我们在上面的代码片段中classname = 'main elems’变成了main\ elems。

与之前为 JavaScript 解释的方式等效,CSS 内联还允许我们的

<style th:inline="css">
    .main\ elems {
      text-align: /*[[${align}]]*/ left;
    }
</style>
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/96254.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

notion + nextjs搭建博客

SaaS可以通过博客来获得SEO流量&#xff0c;之前我自己在nextjs上&#xff0c;基于MarkDown Cloudfare来构建博客&#xff0c;很快我就了解到更优雅的方案&#xff1a;notion nextjs搭建博客&#xff0c;之前搭建了过&#xff0c;没有记录&#xff0c;这次刚好又要弄&#xf…

Cocos Creator3.8 项目实战(七)Listview 控件的实现和使用

滚动列表在游戏中也很常见&#xff0c;比如排行榜 、充值记录等&#xff0c;在这些场景中&#xff0c;都有共同的特点&#xff0c; 那就是&#xff1a;数据量大 &#xff0c; 结构相同。 在cocoscreator 中&#xff0c;没有现成的 Listview 控件&#xff0c; 无奈之下&#xff…

Python数据攻略-数据特征处理离散化和二值化

在数据分析和机器学习中,数据预处理是一个非常重要的步骤。一种常见的数据预处理方法是数据离散化和二值化。但是这两个词可能会让初学者感到困惑。 数据离散化:简单地说,就是将连续的数值分成几个区间,并用这些区间的标签来代替原始值。数据二值化:则是把所有数值转换为0…

Java — 堆内存、新生代、老年代 一般设置为多大内存?

置顶 学习专栏&#xff1a;【Java后端面试题】 1.Java面试题—基础知识、面向对象、【容器】、IO & 【设计模式】、泛型 & 异常 & 反射 & 注解、快速排序2.Java面试题—并发基础、【同步 & 互斥】、JUC & 并发容器、【线程池】、异步编程、【Lambda表达…

【JavaEE重点知识归纳】第5节:方法

目录 一&#xff1a;方法的概念和使用 1.什么是方法 2.方法的定义 3.方法的调用过程 4.实参和形参的关系&#xff08;重点&#xff09; 二:方法重载 1.方法重载概念 2.方法签名 三&#xff1a;递归 1.递归的概念 2.递归执行的过程分析 一&#xff1a;方法的概念和使…

[开源项目推荐]privateGPT使用体验和修改

文章目录 一.跑通简述二.解读ingest.py1.导入库和读取环境变量2.文档加载3.文档处理&#xff08;调用文件加载函数和文本分割函数&#xff09; 三.injest.py效果演示1.main函数解读2.测试 四.修改代码&#xff0c;使之适配多知识库需求1.修改配置文件&#xff1a;constants.py2…

CSS背景图片自适应大小

在CSS中&#xff0c;如果你想让背景图片自适应元素的大小&#xff0c;你可以使用background-size属性。以下是一些示例&#xff1a; 如果你想让背景图片完全填充元素&#xff0c;但不保持原始比例&#xff0c;可以使用cover值&#xff1a; .element {background-image: url(y…

Elasticsearch:ES|QL 查询语言简介

警告&#xff1a;此功能处于技术预览阶段&#xff0c;可能会在未来版本中更改或删除。 Elastic 将尽最大努力解决任何问题&#xff0c;但技术预览版中的功能不受官方 GA 功能的支持 SLA 的约束。在目前的 Elastic Stack 8.10 中此功能还没有提供。 Elasticsearch 查询语言 (ES|…

IntelliJ IDEA 常用快捷键

目录 一、IDEA 常用快捷键 1 通用型 2 提高编写速度 3 类结构、查找和查看源码 4 查找、替换与关闭 5 调整格式 二、Debug快捷键 三、查看快捷键 1、已知快捷键操作名&#xff0c;未知快捷键 2、已知快捷键&#xff0c;不知道对应的操作名 3、自定义快捷键 4、使用…

pip命令大全

pip --version 查看已经安装了的pip版本 pip install -U pip 升级pip pip install --upgrade pip 升级pip pip list 或 pip freeze 查看当前已经安装好了包及版本 pip list -o 查看需要被升级的包 pip install package_name(包名) 下载安装包 pip install matplotlib3.4.…

MyBatisPlus(十一)包含查询:in

说明 包含查询&#xff0c;对应SQL语句中的 in 语句&#xff0c;查询参数包含在入参列表之内的数据。 in Testvoid inNonEmptyList() {// 非空列表&#xff0c;作为参数List<Integer> ages Stream.of(18, 20, 22).collect(Collectors.toList());in(ages);}Testvoid in…

[强网杯 2022]factor有感

可直接私信&#xff0b;Q 3431550587 此题记录主要是他运用了几个新看见的攻击思路和拜读了一篇论文&#xff0c;所以写写。题目源码&#xff1a; #encoding:utf-8 from Crypto.Util.number import * from gmpy2 import * from random import randint from flag import flagd…

[编程思想录]无锁之CAS

一、背景 解决线程并发产生的问题,除了锁,volatile等关键字之外,在特定的情景下为了提高代码运行的效率,为了摆脱“锁”这个独占式的编程方式之外,还有另外一个原子类的概念。 在java.util.concurrent.atomic包下有Java提供的线程安全的原子类,比如AtomicInteger。而这些…

list中符合 多条件中筛选符合条件的值

//查找身高在1.8米及以上的男生 // List<SsxlwdBean> boys list.stream().filter(s->s.getGender() && s.getHeight() > 1.8).collect(Collectors.toList()); xlseachitem list.stream().filter(list->list.xlname.contains(Upstrquery)||list.xlbm.…

AGI之MFM:《多模态基础模型:从专家到通用助手》翻译与解读之视觉理解、视觉生成

​AGI之MFM&#xff1a;《Multimodal Foundation Models: From Specialists to General-Purpose Assistants多模态基础模型&#xff1a;从专家到通用助手》翻译与解读之视觉理解、视觉生成 目录 相关文章 AGI之MFM&#xff1a;《Multimodal Foundation Models: From Speciali…

【Docker内容大集合】Docker从认识到实践再到底层原理大汇总

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总https://blog.csdn.net/yu_cblog/categ…

硬盘损坏不能用怎么办?

硬盘是电脑的核心&#xff0c;如果硬盘出现了问题&#xff0c;那么整台电脑都会受到影响&#xff0c;电脑中的数据也会丢失。那么面对硬盘损坏时我们该如何解决呢&#xff1f;本文今天用5种简单的方法帮您解决&#xff01; 1、硬盘连接是否松动 当电脑的硬盘突然表现出无法识别…

代码随想录训练营二刷第四十八天 | 139.单词拆分 背包问题总结

代码随想录训练营二刷第四十八天 | 139.单词拆分 背包问题总结 一、139.单词拆分 题目链接&#xff1a;https://leetcode.cn/problems/word-break/ 思路&#xff1a;单词拼字符串&#xff0c;完全背包。定义dp[i]&#xff0c;为true表示可以拆分为一或多个单词。可能会出现ab…

Python学习之——测试环境路径的工程示例

Python学习之——测试环境路径的工程示例 Python环境路径几点小结一个工程示例 Python环境路径 参考&#xff1a; Python模块导入与路径管理 1.对于一个纯Python工程, 在 import模块时&#xff0c;Python解释器的搜索顺序是先搜索built-in模块&#xff0c;然后搜索 sys.path这…

Python标准库中内置装饰器@staticmethod@classmethod

装饰器是Python中强大而灵活的功能&#xff0c;用于修改或增强函数或方法的行为。装饰器本质上是一个函数&#xff0c;它接受另一个函数作为参数&#xff0c;并返回一个新的函数&#xff0c;通常用于在不修改原始函数代码的情况下添加额外的功能或行为。这种技术称为元编程&…