效果：

 

html:

//  按鈕
<div class="orderTab clearfix" @click="toggle()">
    <div class="tab floatL" :class="actived==1?'tabActive':''">一樓</div>
    <div class="tab floatL" :class="actived==2?'tabActive':''">二樓</div>
</div>
//  內容區

<div class="Box" v-show="actived == 1"></div> <div class="Box" v-show="actived == 2"></div>

js:

//  data定義變數
actived: 1,
//  點選事件：

toggle () { 　　if (this.actived === 1) { 　　　　this.actived = 2 　　} else { 　　　　this.actived = 1 　　} },

css:

//  選中色：
.tab {
  width: 37px;
  height: 28px;
  font-size: 12px;
  line-height: 28px
 
;
  color: #ffffff;
  text-align: center;
  border-radius: 3px;
}
.orderTab {
  margin: 12px .26rem 0;
  width: 76px;
  height: 30px;
  background-color: #c9151e;
  border-radius: 3px;
  border: solid 1px #c9151e;
}

.floatL { 　　float: left; } .clearfix:after { // 清除浮動 　　content: ""; 　　display: block; 　　clear: both; 　　visibility: hidden; 　　line-height: 0; 　　font-size: 0; 　　height: 0; }