?<span v-for="(item,index) in state" :key="index"
? @click="leftChange(index)"?
? :class="{ liBackground:changeLeftBackground == index}"> {{item}} </span>

? .liBackground { ?background: darkcyan; }

?return {
?? ??? ? ? ? ? ? ?changeLeftBackground: 0, ? ?//默認(rèn)選中第一個
?? ??? ? ? ? ? ? ?state:['兼職','全職','自由職業(yè)'],// 模擬數(shù)據(jù) 所有標(biāo)簽
?? ??? ?}

?methods:{
?? ? ?leftChange(index) {
?? ? ??? ??? ?//當(dāng)前的背景顏色賦給當(dāng)前點擊的索引
? ? ? ? ? ? ?this.changeLeftBackground = index;
? ? ? ?},
}

<ul class="nav nav-tabs" style="background: white;text-align: center">
  <li v-for="(item,index) in tabs" :key="index" class="nav-item">
    <a href="#" rel="external nofollow"  data-toggle="tab" class="nav-link" @click="clickItem(index)" :class="{active:chooseIndex==index}">{{item}}</a>
  </li>
</ul>

tabs: ['BDL', 'EL', 'FL', 'IBL', 'RN', 'WS'],
chooseIndex: 0

clickItem (index) {
  this.chooseIndex = index
  // 點擊之后要做的事
}

.nav-tabs{
  list-style: none;
  margin: 0px;
  padding: 0px;
  width: auto;
  overflow: hidden;
}
.nav-item {
  float: left;
  background: #999999;
  width: auto;
  height: 35px;
}
.nav-item a {
  width: 81px;
  height: 35px;
  font-size: 13px;
  line-height: 35px;
  text-decoration: none;
  padding: 11px 34px;
}
.nav-item a:hover, .nav-item a.active {
  background-color: #fafafa;
  color: #000;
}