Thymeleaf循环语句

Thymeleaf的for循环也是使用标签属性来完成的,th:each代表的就是循环语句。

<ul th:each="t : ${ts}">
  <li th:text="${ts.name}"></li>
</ul>
  • ${ts}是从模板上下文中获取变量
  • t${ts}变量遍历后的每一个对象
  • ${t.name}就可以读取遍历中的变量

打印列表的索引值

<ul th:each="t,it: ${ts}">
  <li>
    <span th:text="${it.count}"></span>
    <span th:text="${t.name}"></span>
  </li>
</ul>
it.index
当前的迭代对象的index(从1开始计算)
it.count
当前迭代对象的index(从1开始计算)
it.size
被迭代对象的大小
it.even/odd
布尔值,循环是否是偶数/奇数
it.first
布尔值,循环是否是第一个
it.last
布尔值,循环是否最后一个
  • 8
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Thymeleaf和Vue.js是两个非常流行的前端技术,它们可以很好地结合在一起,提供更好的用户体验和更好的开发效率。下面是一个基本的Thymeleaf + Vue.js方案: 1. 在Spring Boot项目中添加Vue.js 可以通过npm安装Vue.js,也可以直接将Vue.js源文件添加到项目中,然后在HTML文件中引入它。 2. 在HTML页面中使用Vue.js 可以在HTML页面中使用Vue.js的模板语法,例如: ```html <div id="app"> <p>{{ message }}</p> </div> ``` 3. 在Thymeleaf中使用Vue.js Thymeleaf支持使用自定义属性来绑定Vue.js数据,例如: ```html <div id="app" th:attr="data-message=${message}"> <p>{{ message }}</p> </div> ``` 4. 在Vue.js中使用Thymeleaf变量 可以使用Vue.js的插值语法来绑定Thymeleaf变量,例如: ```html <div id="app"> <p>{{ message }}</p> <p th:text="${message}"></p> </div> ``` 5. 组合Thymeleaf和Vue.js表单 可以使用Vue.js的v-model指令来绑定表单输入,例如: ```html <form th:action="@{/save}" method="post"> <input type="text" name="name" th:value="${user.name}" v-model="user.name"> <input type="text" name="email" th:value="${user.email}" v-model="user.email"> <button type="submit">Save</button> </form> ``` 6. 使用Thymeleaf和Vue.js渲染列表 可以使用v-for指令和Thymeleaf循环来渲染列表,例如: ```html <ul> <li v-for="item in items" th:text="${item.name}"></li> </ul> ``` 以上是一个基本的Thymeleaf + Vue.js方案,可以根据实际需求进行调整和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值