vue实现tab标签页

效果图

1.使用异步组件

 2.数组

<template>
  <div class="ai-module-scene">
    <div class="ai-module-scene-main">
      <div class="ai-module-scene-main-title">应用场景</div>
      <div class="ai-module-scene-main-content">
        <div class="content-left">
          <div
            v-for="(item, index) in applySceneData"
            :key="item.title"
            class="left-item "
            :class="leftItemActive == index ? 'itemActive' : ''"
            @click="selectItem(index)"
          >
            {{ item.title }}
          </div>
        </div>
        <div class="content-right">
          <div class="content" v-if="applySceneData !== null && applySceneData !== undefined">
            <div class="content-title">{{applySceneData[leftItemActive].title}}</div>
            <div class="content-content">
              {{applySceneData[leftItemActive].content}}
            </div>
            <div class="content-img">
              <img :src="applySceneData[leftItemActive].pic" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ["applySceneData"],
  data() {
    return {
      leftItemActive: 0,
    };
  },
  methods: {
    selectItem(i) {
      this.leftItemActive = i;
    },
  },

};
</script>