thymeleaf语法——th：text默认值、字符串连接、th：attr、th：href。。。⽂章⽬录
1、表达式
1.1、简单表达式
${...} 变量表达式
*{...} 选择变量表达式
#{...} 消息表达式
@{...} 链接url表达式
1.2、三元运算、条件表达式：
a? b:c  # 如果a为true，则输出b，否则输⼊c。相当于 (if  else)
a? b    # 如果a为true，则输出b，否则输⼊'' 。相当于 a? b:''
⽰例：
Controller ：
@RequestMapping("/thymeleaf")
public String thymeleaf(ModelMap map){
map.put("name","zhangsan");
return"/grammar/thymeleaf";
}
html：
<h3>条件表达式语法</h3>
<div >
1. <span text="${name}"></span ><br>
2. <span text="${name} ? ${name}+'学习好':'李四体育好'"></span ><br>
3. <span text="${name} ? ${name}+'学习好'"></span ><br>
4. <span text="${name2} ? '李四体育好'"></span ><br>
</div>
运⾏结果：
说明：
第2个表达式： name不为空时，即是true，则输出第⼀个值 zhangsan学习好 。
thymeleaf用法第3个表达式： name不为空时，即是true，则输出第⼀个值 zhangsan学习好 。
第4个表达式： name2不存在，即是false，则输出 ' '，即空。
从第2与第4 可以看出 a? b 相当于 a? b:'' 。
解析后的 html 代码：
<h3>条件表达式语法</h3>
<div >
1. <span>zhangsan</span ><br>
2. <span>zhangsan学习好</span ><br>
3. <span>zhangsan学习好</span ><br>
4. <span></span ><br>
</div>
1.3、默认表达式
当我们取⼀个值，可能为空时，我们可以提前设置⼀个默认值 。
语法：
:
b 相当于 ${a} ? ${a}:b
如果 a不为空时，输出a的值，否则输⼊b的值。
⽰例：
Controller ：
@RequestMapping("/thymeleaf")
public String thymeleaf(ModelMap map){
map.put("name","zhangsan");
return"/grammar/thymeleaf";
}
html：
<h3> th:text 默认值</h3>
<div >
<div text="${name ?: '李四'}"></div >
<div text="${name2 ?: '李四'}"></div >
</div>
说明：
已经设置了name 为 zhangsan，则第⼀个表达式，输出zhangsan 。
第2个表达式，name2不存在，为空，则输⼊默认值李四。
运⾏结果：
解析后的html 代码：
<h3> th:text 默认值</h3>
<div >
<div>zhangsan</div >
<div>李四</div >
</div>
1.4、综合使⽤，属性值的 if - else
html 静态页⾯如下：
<li><a href="javascript:void(0)"><span>菜单AAAA</span></a></li>
<li><a href="/elements.html"class="multitabs"><span>菜单BBBB</span></a></li>
改造说明： items 是⼀个内含多个 item对象的集合， item 有url、icon、text 等属性值。当 url 为空时，href 值设为空⽅法，即 javascript:void(0) ，没有 class 属性；
当 url 有值时，href 设为对应的值，并且增加 class="multitabs" 属性值 。
使⽤ thymeleaf 如下（部分代码）：
<li  each="item,stat : ${items}">
<a href="${item.url==''} ? 'javascript:void(0)':${item.url}"class="${item.url !=''}? 'multitabs'"> <span text="${}"></span>
</a>
<li>
说明： 使⽤条件表达式的⽅法实现的 if-else 条件输出。
2、字符串连接、拼接
字符串连接有两种⽅式 ：
通过 ' ' 和 + 拼接字符串 ；
| | 拼接字符串（推荐）；
⽰例1
html 代码：
变量：[[${hello}]]
<!-- 通过 '' 和 + 拼接字符串 -->
<div text="'哈哈，'+${hello}+'，'+${name}+'！'"></div>
<!-- 通过 | | 拼接字符串（推荐） -->
<div text="|哈哈，${hello}，${name}！|"></div>
运⾏结果：
解析后的html 代码：
变量：hello world
<!-- 通过 '' 和 + 拼接字符串 -->
<div >哈哈，hello world，张三！</div>
<!-- 通过 | | 拼接字符串（推荐） -->
<div >哈哈，hello world，张三！</div>
⽰例2：
<!-- 通过 '' 和 + 拼接字符串 -->
<a href="javascript:void(0)"onclick="'javascript:permission_audit('+ ${id} +') '">通过</a>
<!-- 通过 | | 拼接字符串（推荐） -->
<a href="javascript:void(0)"onclick="|javascript:permission_audit(${id})|">通过</a>
解析后的代码：
<a href="javascript:void(0)"onclick="javascript:permission_audit(12) ">通过</a>
<a href="javascript:void(0)"onclick="javascript:permission_audit(12)">通过</a>
3、th:attr 的使⽤
th:attr 的⽤处就是把数据以属性值的保存起来。
多个属性时，请逗号（,）的⽅式分割。格式如下：
th:attr="attr1=${value1}, attr2=${value2}"
说明：
th:attr 标签定义多个属性的使⽤⽅式已经过时了，不推荐使⽤。推荐的⽅式：
attr1="${value1}"  attr2="${value2}"
⽰例1：
@RequestMapping("/thymeleaf")
public String thymeleaf(ModelMap map){
map.put("cityName","北京");
map.put("cityId","00001");
map.put("regionId","010");
map.put("title","这是⼀张图⽚哦");
map.put("logo","风景图");
return"/grammar/thymeleaf";
}
html：
<h3> th:attr </h3>
<div id="cityBtn"class="btn"attr="data-cityId=${cityId}, data-regionId=${regionId}"text="${cityName}">上海<span class="fa fa-angle-down"></span>
</div>
运⾏结果：
解析后的代码：
<h3> th:attr </h3>
<div id="cityBtn"class="btn"data-cityId="00001"data-regionId="010">北京</div>
说明：
可以看到数据以标签属性的⽅式保存起来。
⽰例2：
<img  src="../../images/ccc.jpg"
attr="src=@{/images/ccc.jpg},title=${title},alt=${logo},myName=${logo}"/>
运⾏结果：
解析后的代码：
<img  src="/images/ccc.jpg"title="这是⼀张图⽚哦"alt="风景图"myName="风景图"/>
4、th:href URL链接中传参
url 的参数 写在 括号内，多个参数时，⽤逗号分割。
⽰例：
Controller ：
@RequestMapping("/thymeleaf")
public String thymeleaf(ModelMap map){
map.put("id","12");
map.put("name","zhangsan");
return"/grammar/thymeleaf";
}
html：
<h3>在 th:href url 中实现参数传递</h3>
<a href="@{/show( id=${id } ,name=${name} )}">相对路径-传参</a>
运⾏结果：
解析后的代码：
多个参数时，⽤逗号分割
<h3>在 url 中实现参数传递</h3>
<a href="/show?id=12&name=zhangsan">相对路径-传参</a>
5、th:insert 、th:replace、th:include 代码⽚段引⼊时传参Controller ：
@RequestMapping("/contentPage2")
public String contentPage2(ModelMap map){
map.put("varA","aaaaaa");
map.put("varB","bbbbbbb");
return"/fragments/contentPage2";
}
html：
/fragments/pagefrag3.html 代码⽚段：
<div fragment="frag (varC,varD)">
<p text="${varC} + ' - ' + ${varD}">...</p>
</div>
contentPage2.html ：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。