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;
 }