vue写一个简单的头部导航样式切换

style样式：

.tab-list{
  width: 100%;
  height: 45px;
  background: rgb(84, 92, 100);
  position: absolute;
  top: 0;
  left: 0;
}
.tab-list li{
  float: left;
  cursor: pointer;
  height: 41px;
  line-height: 45px;
  padding: 0 30px;
  color: #fff;
}
.tab-list li:hover{
  color: rgb(255, 208, 75);
  background: rgb(64, 74, 80);
  border-bottom: 4px solid rgb(64, 74, 80);
}
.tab-list li.active{
  border-bottom: 4px solid rgb(255, 208, 75);
}
.active{
  color: rgb(255, 208, 75);
  background: rgb(64, 74, 80)
}

用到的知识点，点击当前元素添加样式，点击其他元素移除兄弟元素的样式