最近碰到一个需求有意思的需求,前端用的vue,但是需要再for遍历集合的时候控制步长,每次处理两个元素。
这个需求需要考虑的有以下几点:
1、vue的v-for
是标签指令
,而不是向jsp中的forEach那样单独的标签,这意味这它的使用需要一个载体。
2、前后端分离,都是api接口,没有了单体项目时request、session直接set值,前端页面用${}
取值的条件。
3、vue也没有jsp那样的四大作用域,即便有前后端分离时也不能直接把数据塞到<% %>
里面去。
最终的代码如下
<el-row v-for="item,index in tableData">
<ul v-if="index % 2 == 0">
<li v-if="tableData[index] != null">
{
{
tableData[index].goodsName}}
</li>
<li v-if="tableData[index+1] != null">
{
{
tableData[index+1].goodsName}}
</li>
</ul>
</el-row>
整体的思路是用栅格el-row做最外层的for载体,内部用ul做行内元素的展示载体,大家可是按需使用其他的标签,但是无论如何都免不了最外层会生成多个无用的for载体标签。但这貌似没有解决的办法,属于vue的缺陷,如果大家有解决的方法,可以评论说一下。