vue tab切换显示内容

<template>
  <!-- 数智会务中心 -->
  <div id="clubCenter">
    
    <div class="technicalSupport clubCenterItem5">
      <img src="../images/szhwzx/szhwzx5.png" class="technicalSupportImg" />
      <div class="technicalSupportPanel">
        <div class="technicalSupportContent">
          <!-- 选项卡 -->
          <div class="technicalSupportTabPanel flex-start-between">
            <div
              class="technicalSupportTabBorder "
              v-for="(item,index) in technicalSupportTabLiat"
              :key="index" :class="{tstActive : idx == index}" @click="changeNav(index)"
            >
              <div class="technicalSupportTab">
                <div class="flex-center-start technicalSupportTabTitle">
                  <img class="technicalSupportTabImg" :src="item.img" alt />
                  <span class="technicalSupportTabIext">{{item.title}}</span>
                </div>
                <div
                  class="flex-center-start technicalSupportTabContent"
                  v-for="(item1,index1) in item.contentList"
                  :key="index1"
                >
                  <img class="subTechnicalSupportTabImg" src="@/images/szhwzx/jsbz4.png" alt />
                  <span class="subTechnicalSupportTabIext">{{item1}}</span>
                </div>
                <img src="@/images/szhwzx/jsbz5.png" class="bottomRightCornerIcon" alt />
              </div>
            </div>
          </div>
          <!-- 内容 -->
          <div class="technicalSupportItemPanel">
            <div
              class="technicalSupportItem"
              v-for="(item,index) in technicalSupportItemImg"
              :key="index"   :class="{tSItemActive : idx == index}" 
            >
              <img :src="item.img" alt />
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  name: "clubCenter",
  data() {
    return {
      idx:0,
    
      technicalSupportTabLiat: [
        {
          title: "会前",
          img: require("@/images/szhwzx/jsbz1.png"),
          contentList: ["活动营销", "注册报名", "活动邀约"],
        },
        {
          title: "会中",
          img: require("@/images/szhwzx/jsbz2.png"),
          contentList: ["现场注册", "电子签到", "趣味互动", "商务社交"],
        },
        {
          title: "会后",
          img: require("@/images/szhwzx/jsbz3.png"),
          contentList: ["数据统计"],
        },
      ],
      technicalSupportItemImg: [
        { img: require("@/images/szhwzx/jsbzC1.png") },
        { img: require("@/images/szhwzx/jsbzC2.png") },
        { img: require("@/images/szhwzx/jsbzC3.png") },
      ],
    };
  },
  methods:{
      changeNav(index){
         this.idx=index
      }
  }
};
</script>
<style>
#clubCenter {
  font-family: PingFangSC-Medium, PingFang SC;
}
#clubCenter .technicalSupportItem img {
  width: 100%;
  height: 100%;
}


/* 技术保障样式开始 */
#clubCenter .clubCenterItem4 {
  margin-bottom: 1rem;
}
#clubCenter .technicalSupportPanel {
  margin: 0.4rem 0 1.5rem 0;
  padding: 0 0.4rem;
}
#clubCenter .technicalSupportContent {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rem 0.04rem 0.08rem 0rem rgba(203, 219, 243, 0.16);
  border-radius: 0.04rem;
  border: 1px solid rgba(215, 231, 255, 1);
  padding: 0.38rem 0 0.48rem 0;
}
#clubCenter .technicalSupportTabPanel {
  padding: 0 0.3rem;
}
#clubCenter .technicalSupportItemPanel {
  border-top: 0.08rem solid rgba(247, 248, 253, 1);
  padding: 0.55rem 0.22rem 0 0.22rem;
}
#clubCenter .technicalSupportTabImg {
  width: 0.42rem;
  height: 0.48rem;
}
#clubCenter .technicalSupportTabIext {
  font-size: 0.28rem;
  font-weight: 500;
  color: rgba(13, 18, 55, 1);
  padding-left: 0.16rem;
}
#clubCenter .subTechnicalSupportTabImg {
  width: 0.2rem;
  height: 0.2rem;
}
#clubCenter .subTechnicalSupportTabIext {
  font-size: 0.24rem;
  font-weight: 400;
  color: rgba(13, 18, 55, 1);
  padding-left: 0.15rem;
}
#clubCenter .technicalSupportTab {
  width: 1.9rem;
  height: 3.2rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 4px 8px 0px rgba(203, 219, 243, 0.16);
  border-radius: 4px;
  border: 1px solid rgba(215, 231, 255, 1);
  padding: 0.24rem 0 0 0.25rem;
  position: relative;
}
#clubCenter .bottomRightCornerIcon {
  width: 0.56rem;
  height: 0.56rem;
  position: absolute;
  right: 0;
  bottom: 0;
  display: none;
}
#clubCenter .technicalSupportTab:nth-child(2) {
  margin: 0 0.2px;
}
#clubCenter .technicalSupportTabTitle {
  margin-bottom: 0.32rem;
}
#clubCenter .technicalSupportTabContent {
  margin-bottom: 0.14rem;
}

#clubCenter .technicalSupportTabBorder {
  padding: 0 0 0.4rem 0;
  border-bottom: 0.08rem solid transparent;
}
#clubCenter .tstActive {
  border-bottom: 0.08rem solid rgba(0, 100, 255, 1);
}
#clubCenter .tstActive .technicalSupportTab {
  box-shadow: -0.01rem 0.25rem 0.17rem -0.18rem rgba(160, 175, 198, 0.45);
  border: 1px solid rgba(0, 100, 255, 1);
}
#clubCenter .tstActive  .bottomRightCornerIcon{
    display: block;
}
#clubCenter .technicalSupportItem{
    display: none;
}
#clubCenter .tSItemActive{
    display: block;
}
/* 技术保障样式结束 */
</style>

element-ui开发tab切换vue的不同组件

vue + element-ui 制作tab切换（切换vue组件，踩坑总结） - 王维璋 - 博客园