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;
}
原文地址:https://www.cnblogs.com/candy-Yao/p/9945437.html