通过v-for创建的a-tabs组件,不展示默认第一项操作

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

当前的效果:虽然有选中的状态,但是没有展示第一项。

通过v-for创建的a-tabs组件,不展示默认第一项操作

当点击tab选项的时候,就会显示

通过v-for创建的a-tabs组件,不展示默认第一项操作 

 上面问题的解决方法:

将代码中默认展示的第一项数据去除:

通过v-for创建的a-tabs组件,不展示默认第一项操作

 

上一篇:【学习总结】《Unity3D网络游戏》Part 1


下一篇:【原创】高性能网络编程(二):上一个10年,著名的C10K并发连接问题