tab切换 -- vue

效果：

 

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;

}