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>
  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值