vue 循环列表时 给列表中 某一项添加不同的样式

 个人笔记

 

 效果

 只给中间的列  添加边框

根据索引值进行判断  当index为1时  添加 list_bor 这个样式

 <div class="list">
      <div :class="['list_a',{'list_bor':index==1}]" v-for="(item,index) in arr " :key="index"  >
        <img :src=" item.imga" alt="" />
        <div class="pric">
          <div class="le">{{item.txt}}</div>
          <div class="ri">{{item.txt1}}</div>
        </div>
      </div>
    </div>

数据

 arr:[
          {
              imga:require("../../../assets/image/6.png"),
              txt:'50',
              txt1:'积分'
          },
           {
              imga:require("../../../assets/image/5.png"),
              txt1:'积分订单',
              
          },
           {
              imga:require("../../../assets/image/7.png"),
              txt1:'积分规则',
             
          }
      ]

cs

.list {
  width: 100vw;
  height: 20vw;
  display: flex;
  margin-top: -2.8vw;
  border-bottom: 0.1vw solid #dcdcdc;
  border-top: 0.1vw solid #dcdcdc;
}
.list_a{
    width: 33.3vw;
    height: 11vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    margin-top: 4vw;    
}
.list_bor{
    border-left: 0.1vw solid #dcdcdc;
    border-right: 0.1vw solid #dcdcdc;
}
.list_a img {
  width: 5vw;
  height: 5vw;
}
.pric {
  display: flex;
  align-items: center;
}
.le {
  font-size: 3vw;
  color: #f8584f;
}
.ri {
  font-size: 3vw;
  color: #666666;
}