vue竖线分割；分割线结尾处不显示；分割线每组最后一个不显示

 实现如下图

html部分

<div class="count"> <span class="countItem" v-for="(item,index) in countList"><span>{{item.title }}:</span><span>{{item.value}}</span> <i class="line" v-if="countList.length!=index+1&&(index+1)%3!=0">|</i> </span> 
</div>

主要部分

//判断数组的数量和下一位数组的索引 
countList.length!=index+1 
//控制在第几个不显示 
(index+1)%3!=0"

css部分

.count { display: flex;flex-wrap: wrap; //加上这个可以左对齐显示 之前用的justify-content: center; 换行后都是居中显示的padding: 0 40px} 
.line {padding: 0 8px;}