Use v-for nested traversal en el proyecto vue para realizar el cambio de contenido de la pestaña de la pestaña del componente vux

primera diapositiva

el segundo

tercero

<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,

La matriz de título en los datos, así como el valor inicial de num, están escritos en los datos. No sé por qué, pero el código no se muestra por completo.
La matriz en los datos es un poco confusa aquí. De hecho, hay una matriz incrustada en la matriz. No sé si tiene una mejor manera. Bienvenido a la guía

De esta manera, se realiza el cambio de contenido.Este proyecto está escrito por componentes vue plus vux.Todos
los códigos anteriores están escritos en el mismo componente vue.