(五)Themeleaf的 th:* 属性之—— th: ->text& utext& href

th:*使用原因:

  • for the sake of simplicity and compactness of the code samples(简化代码)
  • the th:*notation is more general and allowed in every Thymeleaf template mode (XMLTEXT…)(th:*在多个模板模式里更为通用且允许)
常用th标签都有那些?

关键字      功能介绍        案例
th:id      替换id          <input th:id="‘xxx‘ + ${collect.id}"/>
th:text     文本替换        <p th:text="${collect.description}">description</p>
th:utext    支持html的文本替换   <p th:utext="${htmlcontent}">conten</p>
th:object    替换对象        <div th:object="${session.user}">
th:value    属性赋值        <input th:value="${user.name}" />
th:with    变量赋值运算        <div th:with="isEven=${prodStat.count}%2==0"></div>
th:style    设置样式            th:style="‘display:‘ + @{(${sitrue} ? ‘none‘ : ‘inline-block‘)} + ‘‘"
th:onclick    点击事件          th:onclick="‘getCollect()‘"
th:each    属性赋值            tr th:each="user,userStat:${users}">
th:if    判断条件            <a th:if="${userId == collect.userId}" >
th:unless    和th:if判断相反        <a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:href    链接地址              <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
th:switch    多路选择 配合th:case 使用    <div th:switch="${user.role}">
th:case    th:switch的一个分支        <p th:case="‘admin‘">User is an administrator</p>
th:fragment    布局标签,定义一个代码片段,方便其它地方引用    <div th:fragment="alert">
th:include    布局标签,替换内容到引入的文件    <head th:include="layout :: htmlhead" th:with="title=‘xx‘"></head> />
th:replace    布局标签,替换整个标签到引入的文件    <div th:replace="fragments/header :: title"></div>
th:selected    selected选择框 选中    th:selected="(${xxx.id} == ${configObj.dd})"
th:src    图片类地址引入          <img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
th:inline    定义js脚本可以使用变量    <script type="text/javascript" th:inline="javascript">
th:action    表单提交的地址        <form action="subscribe.html" th:action="@{/subscribe}">
th:remove    删除某个属性        <tr th:remove="all">
                    1.all:删除包含标签和所有的孩子。
                    2.body:不包含标记删除,但删除其所有的孩子。
                    3.tag:包含标记的删除,但不删除它的孩子。
                    4.all-but-first:删除所有包含标签的孩子,除了第一个。
                    5.none:什么也不做。这个值是有用的动态评估。
th:attr    设置标签属性,多个属性可以用逗号分隔    比如 th:attr="[email protected]{/image/aa.jpg},title=#{logo}",此标签不太优雅,一般用的比较少。

3.1 th:text

可对表达式或变量求值,并将结果显示在其被包含的 html 标签体内替换原有html文本。

文本链接: 用 "+" 符号,若是变量表达式也可以用“|”符号

eg.

<p th:text="#{home.welcome}">Welcome to our grocery store!</p>

equals.(局限:只能在html5中使用)

<p data-th-text="#{home.welcome}">Welcome to our grocery store!</p>
  • The th:text attribute, which evaluates its value expression and sets the result as the body of the host tag, effectively replacing the “Welcome to our grocery store!” text we see in the code.(th:text属性,他声明设置表达式的值,并使表达式返回的值来填充标签内容,替换或设置标签内部的内容,当前例子中即替换“欢迎光临本店”这些字。)
  • The #{home.welcome} expression, specified in the Standard Expression Syntax, instructing that the text to be used by the th:text attribute should be the message with the home.welcome key corresponding to whichever locale we are processing the template with.(#{home.welcome}表达式,一个标准的表达式语法,指出在模板中,th:text属性所对应Message的key,即使用home.welcome对应的value替换现有内容。)

3.2 th:utext(非转义文本:unes??caped text)

e.g.(想要输出转义字符效果)

home.welcome=Welcome to our <b>fantastic</b> grocery store!  

执行此模板,默认使用<p th:text="#{home.welcome}"></p>来解析,结果为:

<p>Welcome to our &lt;b&gt;fantastic&lt;/b&gt; grocery store!</p>

解决方案:(This is the default behaviour of the th:text attribute. If we want Thymeleaf to respect our HTML tags and not escape them, we will have to use a different attribute: th:utext (for “unescaped text”):)

使用<p th:utext="#{home.welcome}"></p>即可。

<p th:utext="#{home.welcome}">Welcome to our grocery store!</p>

等效于html:

<p>Welcome to our <b>fantastic</b> grocery store!</p>

3.3 th:href

@{xxx} :链接url的表达式

<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>
时间: 2024-07-29 15:51:08

(五)Themeleaf的 th:* 属性之—— th: ->text& utext& href的相关文章

重要经验五:block作为属性的注意事项

现代ios应用的开发,不使用GCD和block,效率会降低很多,在今年3月份之前,我在block的学习和使用方面,精力和经验都明显不足,在SF有个牛逼同事,不仅自己积累了一套库,而且对这个库持续进行更新和维护,其架构能力和代码水平都不错,他的代码中使用了大量的GCD,为了适应这些技术,我在coding的过程中,开始有意识的多写GCD的代码,刚开始一切顺利,直到我使用block来作为一个对象的属性,这让我纠结了很久. 我遇到的问题是:1,这种属性block,其他类在使用的时候,应该怎么写? 2,b

jQuery - 设置内容和属性 设置内容 - text()、html() 以及 val() , 设置属性 - attr()

jQuery - 设置内容和属性  设置内容 - text().html() 以及 val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 下面的例子演示如何通过 text().html() 以及 val() 方法来设置内容: 实例 $("#btn1").click(function(){ $("#test1").text("Hello worl

第五章-css常用属性

第五章 CSS常用属性 1. span标签 突显,强调局部文字的作用. 2.字体样式 font-size: 字体大小 font-style:normal,italic(倾斜) font-weight:normal,bold(加粗) font-familty:字体类型(楷体) font:样式 粗细 字体大小 字体类型. 3.文本样式 color: 文本样式 text-align: 水平对齐方式(left,center,right) text-indent: 首行缩进 line-height: 行高

第五课时之HTML属性

5.HTML 属性 5.1HTML 属性 HTML 元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签 属性总是以名称/值对的形式出现,比如:name="value". 属性实例 HTML 链接由 <a> 标签定义.链接的地址在 href 属性中指定: <a href="http://www.baidu.com">这是一个链接</a> 5.2HTML 属性常用引用属性值 属性值应该始终被包括在引号内. 双引号是

Android View measure (五) 支持margin属性,从一个异常说起

先来看下代码 一.查看夏目 1. 自定义控件 public class CustomViewGroup extends ViewGroup { ...... @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); // 遍历所有子视图,进行measure操作 for (int i =

Entity Framework(EF) Code First将实体中的string属性映射成text类型的几种方式

1.通过ColumnType属性设置 [Column(TypeName="text")] public string Text { get; set; } 在进行以上属性设置时,请首先引入命名空间:System.ComponentModel.DataAnnotations.Schema 2.通过StringLength属性设置 [StringLength(4010)] public string Text { get; set; } 3.通过Fluent API配置设置  modelB

MVC3+EF4.1学习系列(五)----- EF查找导航属性的几种方式

通过上一篇的学习 我们把demo的各种关系终于搭建里起来 以及处理好了如何映射到数据库等问题 但是 只是搭建好了关系 问题还远没有解决 这篇就来写如何查找导航属性 和查找导航属性的几种方式 已经跟踪生成的SQL来检测是否满意 通过这节学习 来明白什么时候用哪个~~ 一.三种加载 1.延迟加载 这是原文中的图 大家可以去看下  我模仿上面的做了个测试  出现了  已有打开的与此 Command 相关联的 DataReader,必须首先将它关闭. 我的解决办法是    var departments

Vue 2.0 深入源码分析(五) 基础篇 methods属性详解

用法 methods中定义了Vue实例的方法,官网是这样介绍的: 例如:: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <title>Document&

第五章 CSS常用属性笔记

1. span标签 突显,强调局部文字的作用. 2.字体样式 font-size: 字体大小 font-style:normal,italic(倾斜) font-weight:normal,bold(加粗) font-familty:字体类型(楷体) font:样式 粗细 字体大小 字体类型. 3.文本样式 color: 文本样式 text-align: 水平对齐方式(left,center,right) text-indent: 首行缩进 line-height: 行高 text-decora