<a-tabs class="aTabs" style="width: 1920px; height: 814px">
<a-tab-pane
class="second_part_ul_li"
v-for="(v, i) in twiceUlData"
:key="i"
>
<span slot="tab" @click="secondPartChosed(i, v)">
<img
class="second_part_ul_li_img"
:src="active === i ? v.img1 : v.img"
alt=""
/>
<p
:class="{ second_part_chosed: active === i }"
class="second_part_ul_li_p content_font2"
>
{{ v.title }}
</p>
</span>
<div
class="forth_part"
style="
display: flex;
justify-content: center;
transform: translateY(-14px);
"
>
<div class="forth_part_left">
<h1 class="forth_part_left_h1 content_font1">
{{ forth_part_left_h1 }}
</h1>
<span class="forth_part_left_span content_font2">
{{ forth_part_left_span }}
</span>
<p class="forth_part_left_p">
<span class="content_font2">高可靠</span>
<span class="content_font2">高可用</span>
</p>
</div>
<div class="forth_part_right">
<div
class="forth_part_right_div"
v-for="(v, i) in secondDivData"
:key="i"
>
<h1 class="forth_part_right_div_h1 content_font1">
{{ v.titile }}
</h1>
<p class="forth_part_right_div_p1 content_font2">
{{ v.content }}
</p>
<p class="forth_part_right_div_p2">
<span class="content_font2">高可靠</span>
<span class="content_font2">高可用</span>
</p>
</div>
</div>
</div>
</a-tab-pane>
</a-tabs>
当前的效果:虽然有选中的状态,但是没有展示第一项。
当点击tab选项的时候,就会显示
上面问题的解决方法:
将代码中默认展示的第一项数据去除: