vue 组件切换

<template>
  <div>
    <div class="nav">

       <div   class="assets "  v-for="(item,index) in  components" :key="index" :id="item.id" 
       :class="{ active:changeColor == index}"     @click="change(index,$event)">
           {{item.value}}
       </div>
         <p  style="font-size: 23px;float: left;margin-left: 200px;">
            科目初期
         </p>           
           <button  class="trialBalance">试算平衡</button>
           <button  class="addition">新增</button>
    </div>
         <component :is="currentView"></component>
  </div>
</template>
<script>
import  cost from './child/cost';
import  interests from './child/interests';
import  liabilities  from './child/liabilities';
import   loss  from './child/loss';
import   assets  from './child/assets';
  export default {
    components: {
      cost,
      interests,
      liabilities,
      loss,
      assets
    },
    created(){
    },
    data(){
      return{
         changeColor:0,
        currentView : 'assets',
         components:[
          {
           "id" : "assets",
           "value" : "资产",
           "class" :  "aa"
         },{
           "id" : "cost",
           "value" : "成本"
         },{
             "id" : "liabilities",
           "value" : "负债"
         },{
             "id" : "interests",
             "value" : "权益"
         },
         {
           "id" : 'loss',
            "value" : '损益'
         }
         ]
      }
    },
    props : ["data"],
    methods:{
       change(index,event){
           this.changeColor = index;
           console.log(event);
           this.currentView=event.path[0].id; 
       }
    },
  }
</script>
<style scoped>
 button{
   outline: none;
   cursor: pointer;
   border:none;
}
  .nav{
    overflow:hidden;
  }
  .active{
    background: #25aff6;
    color:#fff;
  }
  .assets,.liabilities,.cost,.interests,.loss{
    margin-right: 10px;
    float:left;
    height:30px;
    line-height: 30px;
    text-align: center;
    width:80px;
    border-radius: 10px;
    border: 1px solid #c9cccd;
  }
  .nav>div:hover{
    cursor: pointer;
  }
  .addition{
    float:right;
    color:#fff;
    text-align:center;
    background:#ff9872;
    height:34px;
    line-height:34px;
    width:96px;
    border-radius: 10px;
  }
  .trialBalance{
    float:right;
    color:#fff;
    text-align:center;
    background:#5eeaa8;
    height:34px;
    line-height:34px;
    width:96px;
    border-radius: 10px;
    margin-left:17px;
  }
</style>