如何使用vue双向数据绑定实现一个tab切换

我的思路是用v-bind去绑定当前点击元素的class，不多说上代码

<div class="consumptionYype">
  <a href="javascript:;" @click="statementDetails(item,index)" v-for="(item,index) in statementType" v-bind:class="{active: item.isActive}">{{item.name}}</a>
</div>

<div class="statementSwitch">
    <div class="statementS" v-for="statementSItem in statementsType" v-bind:class="{active: statementSItem.isActive}">
      <p>2018年7月27日 <span>总消费<span>325元</span></span></p>
        <ul class="statementSList">
           <li>
             <img src="../../assets/2.png" alt="">
             <div class="statementSListInformation">
               <a href="">王剑</a><a href="">外观清洗</a><a href="">{{statementSItem.last}}</a>
             </div>
           </li>
        </ul>
    </div>
</div>

上边是点击的tab，下边是将要发生切换的元素

vue代码：

data(){
    return{
        //动态设置分类按钮，给第一个元素设置一个默认的class（通过isActive：true实现）
        statementType:[
            {"name":"明细","isActive":true},
            {"name":"报表","isActive":false},
            {"name":"导出","isActive":false}
        ],
        //动态设置内容，方法同上
      statementsType:[
          {"last":"25元","isActive":true},
          {"last":">","isActive":false},
          {"last":"30元","isActive":false}
      ]
    }
  },
methods: {
  // 明细分类tab切换，点击时获取当前按钮对象以及下标
  statementDetails(item,index) {
      //便利数组，删除所有按钮class名
      this.statementType.forEach((items,index)=>{
          items.isActive = false
      })
      //便利数组，删除所有内容class名
      this.statementsType.forEach((items,index)=>{
          items.isActive = false
      })

      //动态添加当前按钮与当前内容的class名
      this.statementsType[index].isActive = true
      item.isActive = true
  }
}


整体思路是利用v-bind动态改变当前元素的class名，添加一个diaplay：block实现一个简单的tab切换