1：HTML

 <ul>
      <li v-for="(item,index) of itemList" :class="current===index ? 'active' : ''"   @click="tabClick(item)">{{item.name}}</li>
    </ul>

2:后端数据，（这里自己做的假数据）

data(){
 return{
    itemList:[
          {
            name:"首页",
            id:0,
          },
          {
            name:"个人中心",
            id:1,
          },
          {
            name:"设置",
            id:2,
          }
        ],
         current:0,//这里是为了开始显示哪一个
    }
}

3：js

  tabClick(item){
        console.log(item);
        this.current = item.id;//把id赋值给curent,从而达到点击哪个改变哪个的效果
      },

4:css

//这里就是给导航栏被点击后的样式书写，我这里就随便写了
 .active {
     background: #8c939d;
      color: pink;
    }