结构

<div class="hello">

    <div class="div-box">

      <div v-for="(item,i) in head" :key="i"  @click="clickIndex(i)">

      <div class="div-box1">

      <span :class="[i == indexs ? 'div-span' : '']">{{item}}</span>

      <span :class="[i == indexs ? 'div-span1' : '']"></span>

      </div>

    </div>

    </div>

  </div>

css

.div-box{

   display: flex;

   width: 1200px;

   margin: 0 auto;

   height: 50px;

 }

  .div-box>div{

    margin: 0 15px;

  }

  .div-span{

    color: rgba(255, 101, 61);

  }

  .div-box1{

    display: flex;

    flex-direction: column;

    align-items: center;

  }

  .div-span1{

    display: block;

    height: 2px;

    width: 30px;

    border: 1px solid #ccc;

    background-color:rgba(255, 77, 17) ;

    margin-top: 5px;

  }

vue 逻辑

export default {

  name: 'Home',

  data(){

    return {

      list:['首页','会员专享','特价专区','租号大厅','电竞陪玩','找代练','账号交易','登号教程','帮助中心']

      ,

      indexs:0

    }

  },

  methods:{

    clickIndex(e){

      console.log(e);

      this.indexs = e

    }

  }

}