vue tab栏切换

vue tab栏切换

<template>
  <div>
      <div class="tab" v-for="item in tabDatas" @click="checkTab(item)" :class="[checkTabDatas.id == item.id ? 'bg_have_color' : '']">
          <div>{{item.name}}</div>
          <div>{{item.description}}</div>
      </div>
      <div v-for="item in checkTabDatas.childrens">
          <div>{{item.title}}</div>
          <div>{{item.description}}</div>
      </div>
  </div>
</template>

<script type="text/javascript">
export default {
    data() {
        return {
            checkTabDatas: [],
            tabDatas: [
                {
                    name: "真机调试",
                    description: "描述 描述 描述",
                    childrens: [
                        {
                            title: '机型强大',
                            description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                        },
                        {
                            title: '机型强大',
                            description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                        },
                        {
                            title: '机型强大',
                            description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                        }
                    ]
                },
                {
                    name: "兼容测试",
                    description: "描述 描述 描述",
                    childrens: [
                        {
                            title: '机型强大',
                            description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                        },
                        {
                            title: '机型强大',
                            description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                        },
                        {
                            title: '机型强大',
                            description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                        }
                    ]
                },
                {
                    name: "性能测试",
                    description: "描述 描述 描述",
                    childrens: [
                        {
                            title: '机型强大',
                            description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                        },
                        {
                            title: '机型强大',
                            description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                        },
                        {
                            title: '机型强大',
                            description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                        }
                    ]
                },
                {
                    name: "功能测试",
                    description: "描述 描述 描述",
                    childrens: [
                        {
                            title: '机型强大',
                            description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                        },
                        {
                            title: '机型强大',
                            description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                        },
                        {
                            title: '机型强大',
                            description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                        }
                    ]
                },
                {
                    name: "生命周期测试",
                    description: "描述 描述 描述",
                    childrens: [
                        {
                            title: '机型强大',
                            description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                        },
                        {
                            title: '机型强大',
                            description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                        },
                        {
                            title: '机型强大',
                            description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                        }
                    ]
                },
                {
                    name: "完全测试",
                    description: "描述 描述 描述",
                    childrens: [
                        {
                            title: '机型强大',
                            description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                        },
                        {
                            title: '机型强大',
                            description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                        },
                        {
                            title: '机型强大',
                            description: '1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。1000+真机实时待命。'
                        }
                    ]
                }
            ]
        }
    },
    mounted() {
        this.checkTabDatas = this.tabDatas[0].childrens;
    },
    methods: {
        checkTab(item){
        	//选中对应的childrend对象，动态放入checkTabDatas 
            this.checkTabDatas = item.childrens;
        }
    }
}
</script>