第一张

第二张

第三张

<div class="classify">
            <tab>
                <tab-item v-for="(title,index) in tabTitle" :key="title.index" @on-item-click="onItemClick(index)">{{title}}</tab-item>
                //使用v-for遍历标题
            </tab>
        </div>

        <div class="content">
            <div v-for="(item,index) in list" v-show="index==num" v-bind:key="item.index">
                <div v-for="(content) of item" v-bind:key="content.id" class="news">
                //此处为嵌套遍历，你也可以用使用child子数组
                //<div v-for=(content) of list.child....当然data中的数组也要相应发生改变
                    <img class="newsImg"  src="content.src" alt="">
                    <div class="newsText">
                        <div class="newsTitle">
                            <span>{{content.title}}</span><br>
                            <span>{{content.desc}}</span>
                        </div>
                    </div>
                    </div>
                 </div>
        </div>

method(){
onItemClick(index) {
                this.num = index;
                console.log(this.num);
                console.log('on item click:', index)
                }
            },
 data(){
     return{
 list: [[{
                    id:'0',
                    src: 'http://somedomain.somdomain/x.jpg',
                    fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                    title: '标题一',
                    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                    url: ''},
                    {
                        id:'1',
                        src: 'http://somedomain.somdomain/x.jpg',
                        fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                        title: '标题二',
                        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                        url: ''},
                    {
                        id:'2',
                        src: 'http://somedomain.somdomain/x.jpg',
                        fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                        title: '标题三',
                        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                        url: ''}

                ],
                    [{
                        id:'0',
                        src: 'http://somedomain.somdomain/x.jpg',
                        fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                        title: '标题四',
                        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                        url: ''},
                        {
                            id:'1',
                            src: 'http://somedomain.somdomain/x.jpg',
                            fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                            title: '标题五',
                            desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                            url: ''},
                        {
                            id:'2',
                            src: 'http://somedomain.somdomain/x.jpg',
                            fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                            title: '标题六',
                            desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                            url: ''},

                    ],
                    [{
                        id:'0',
                        src: 'http://somedomain.somdomain/x.jpg',
                        fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                        title: '标题七',
                        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                        url: ''},
                        {
                            id:'1',
                            src: 'http://somedomain.somdomain/x.jpg',
                            fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                            title: '标题八',
                            desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                            url: ''},
                        {
                            id:'2',
                            src: 'http://somedomain.somdomain/x.jpg',
                            fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                            title: '标题九',
                            desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                            url: ''},

                    ],

                ],

                	 tabTitle:['热点政策','公司资讯','招聘信息'],
                    num:0,
                    }
         }
        

				tabTitle:['热点政策','公司资讯','招聘信息'],
                num:0,

数据中的标题数组，以及num初始值，写在data里，不知道为什么，代码显示不全。
数据中的数组这里有点绕，其实就是数组里面有嵌了一个数组，不知道各位大神有没有更好的方法，欢迎指导

这样就实现了内容切换，这个项目是vue加上vux组件写的
以上所有代码都是写在同一个vue组件里的。