📏

Java template 文件 vue 混合 thymeleaf 踩坑记录

Java 项目的 template 按理说应该算后端的东西,但是作为前端小白,html 和 js 可以说是基本不会,只能现用现查,所以可能都是些低级问题。为了使用 thymeleaf 中的一些功能,项目的 template 文件变成了 vue + thymeleaf 混合内容。实际开发遇到了一些问题,这边集中记录下

Click

首先了解一个基础知识,就是 vue.js 里 @click 和 v-on:click 是一个东西,前者只是后者的缩写。同理,v-bind: 也可以缩写为 :,比如 v-bind:href 和 :href 就是一个东西。

一般来说模板文件里要用 click 就直接 v-on:click="getSomething('xxxxx')" 完事,但是如果你用了 thymeleaf 里面 each 之类的东西,这个 xxxxx 可能就是个变量了。好比用了这样一个 each

th:each="group:${menus}

那这个 each 里面的 click 就得改写成这样(比如说参数用的 group 里的 menuGroupId)

th:@click="|getSomething(${group.menuGroupId})|"

Thymeleaf 在这边介绍了文字处理的一些方法,其中就有 Literal substitutions: |The name is ${name}|。需要用到 | 来转换通过 ${} 取到的值。