thymeleaf 与 vue 结合使用时,vue如何取模板里的值

<li th:each="grade : ${grades}" th:v-bind:class="|{current: gradeId==${grade.id}}|">
<a th:title="${grade.name}" href="javascript:void(0)"  th:id="${grade.id}"
  th:text="${grade.name}"  th:@click="|getCourses(${grade.id},subjectId,1)|"
  >二年级</a></li>

th:@click="|getCourses(${grade.id},subjectId,1)|"

@click为VUE里绑定的点击事件,此时事件存在于thymeleaf的循环th:each下的元素,getCourses() 为vue里的方法属于js,但是需要取到模板里产生的值<年级id>

此时可以用th:v-on:"| |" 或者th:@click="| | " 简单来说就是将前端的方法当作字符串拼接起来,前面加th:就能解析${grade.id} 的值

th:v-bind:class="|{current: gradeId==${grade.id}}|"

同理,绑定class用于样式也能如此

posted @ 2020-08-19 09:32  木子李和三点水  阅读(2337)  评论(0编辑  收藏  举报