vue页签切换

<template>
   <div class="hello">
        <div class="btn-wrap">
            <div v-for="(item,index) in btn" :class="{active:(index == indexs)}" @click="a(index)">{{item}}</div>
        </div>
        <div class="tab">
            <div v-for="(w,key,index) in box" v-if="indexs == index">{{key}}</div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            btn: ['按钮1','按钮2','按钮3'],
            box: { aa: "tab切换1", bb: "tab切换2", cc: "tab切换3" },
            indexs: 0,
        }
    },
    methods: {
       a(str){
            this.indexs = str;
       }
    }
}
</script>
<style >
*{
}
    .btn-group{
    width:50%;
    margin: 0 auto;
}
button{
    border:none;
    width: 50px;
    height: 30px;
}
.wrap div {
    width: 100%;
    height: 300px;
    background-color: #0cc;
}

.active {
    background-color: red
}
</style>