thymeleaf的不同用法

一、获取项目路径contextPath
将下面代码写到共用的html中
 

let context = [[@{/}]]
//这种方法Javascript汇报错，导致了在idea中，
//只要在{后面回车，就会自动增加一个}所以可以采用下一个方法

 /*<![CDATA[*/
   context = /*[[@{/}]]*/ '';
 /*]]>*/
 //这样不会报错，也能正常使用

二、创建共用HTML，可以将HTML中任意模块引入到你想要引入的页面
这个需要用到两个thymeleaf的命令
th:fragment和th:replace

th:fragment 是给你HTML中的某个区域加上一个标识

th:replace 就是将th:fragment定义的内容引入到别的html中

如下代码：

<div th:fragment="hello">
    hello world
</div>

<div th:replace="common :: hello">
</div>

 th:replace 有两个参数，第一个common，就是你公共文件的名字，如果前面有路径就加上路径，建议就放在根目录下。第二个参数hello，就是common中你要引用的区域。

同时第二个参数后面，又可以加上单独的参数，可以用于特殊的动态引用。

如下代码：

<div th:fragment="hello(opt)">
    <div th:text="${opt}"></div>
</div>

<div th:replace="common :: hello('china')">
</div>

如果两边参数没有对应上的话，就会直接报错。然后也可以和vue配合，动态显示你想要的东西。

三、可以和其他标签的属性搭配

th:xxx 是thymeleaf的用法，这不仅可以使用themeleaf原来的属性，还可以和其他标签搭配使用。这样，其他标签也得到了thymeleaf的能力。

比如一个a标签的href属性，如果单独使用的话，是没有办法使用th的能力的。但是在前面加上th:href就可以获得th的能力，可以使用[[@{/}]]获得项目路径。

不仅仅可以和原生的html属性搭配，还可以和vue的属性搭配。

比如上面的动态参数，如果想要动态显示隐藏的话，vue中是没有办法直接拿到参数opt的。并且使用th:style也是不生效的（我也不知道为什么），但是和vue中的v-show搭配就可以实现。

这就需要和v-show搭配，比如：th:v-show="${opt}=='china'?true:false"这样就可以显示隐藏不同的内容了。