v-for循环怎么展示tab下面不同的内容?

ywqs
  • 31

我现在有一个tab切换 上面的标题是发请求回来的数据

<ul id="myTab" class="nav nav-tabs ul-menu">

<li 
v-for="(item,index) in lanmu" 
:class="{active:index == num}"
 @click="tab(index,item.category_id)">{{item.category_name}}</li>

</ul>

clipboard.png
下面是切换是发请求回来的数据

clipboard.png
第一个数据是分为上面两块的
但是后面的tab切换页就只有下面这种样式

clipboard.png
<div id="myTabContent" class="tab-content">

            <div class="tabCon">
                    <div v-for="(item) in hotzixun" class="hotzixun">
                          <div class="con" v-show='item.category_id!=1'>
                            <h4><router-link to="/newinfo" class="goinfo">{{item.news_title}}</router-link></h4>
                            <div class="row">
                                <div class="col-xs-4 col-md-4 img"><img @click='goinfo' class="zx img-responsive" v-bind:src="item.cover" alt=""></div>
                                <div class="col-xs-8 col-md-7 tag">
                                   <span v-for="(item, index) in tags" :key="index">
                                       {{item.tag_name}}
                                   </span>
                                                
                                </div>
                            </div>
                        </div>
                      </div>
                      <!-- <div>
                        <img class="er-90 img-responsive" src="../assets/img/er-90.jpg" alt="">
                      </div> -->
                      <div v-for="(item) in liveList" class="hot-zixun">
                        <essence v-bind:src="item.cover" v-bind:tx="item.tx" v-bind:n='item.n' v-bind:h2='item.h2' v-bind:count='item.count' v-bind:data='item.data'
                          v-bind:tag='item.tag'></essence>
                      </div>
                      
                </div>



回复
阅读 3.1k
1 个回答

提问,首先要描述清楚问题,其次需要提供完成的代码或者demo,涉及数据的需要提供数据;

你的问题只要代码,并没有数据,无从分析你的问题。

但是可以推测你描述的问题应该是数据引起的,检查下你的数据是否符合判断条件v-show='item.category_id!=1' 又或者hotzixun的数组是否为空

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏