vue3.0+TS的选项卡

下面是template代码:

 <div class="home">
    <ul>
      <li
        :class="index === activeIndex ? 'ac' : ''"
        v-for="(item, index) in hList"
        :key="item.id"
        @click="tabs(index)"
      >
        {{ item.txt }}
      </li>
    </ul>
    <div class="con">
      <div
        v-show="activeIndex === index"
        v-for="(item, index) in cList"
        :key="item.id"
      >
        {{ item.txt }}
      </div>
    </div>
  </div>

然后是script的代码

import { defineComponent, reactive, ref } from "vue";
interface List {
  id: number;
  txt: string;
}
export default defineComponent({
  name: "Home",
  setup() {
    let activeIndex = ref(0);
    let hList: List[] = reactive([
      { id: 1, txt: "选项1" },
      { id: 2, txt: "选项2" },
      { id: 3, txt: "选项3" },
      { id: 4, txt: "选项4" },
    ]);
    let cList: List[] = reactive([
      { id: 1, txt: "内容1" },
      { id: 2, txt: "内容2" },
      { id: 3, txt: "内容3" },
      { id: 4, txt: "内容4" },
    ]);
    function tabs(index: number) {
      activeIndex.value = index;
    }

    return {
      hList,
      cList,
      activeIndex,
      tabs,
    };
  },
});

最后是css代码:

body {
  margin: 0;
}
.home {
  margin: 0 auto;
  border: 1px solid #000;
  width: 800px;
  height: 600px;
  ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 50px;
    li {
      list-style: none;
      float: left;
      width: 25%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background-color: pink;
      cursor: pointer;
    }
    .ac {
      background-color: tomato;
    }
  }
  .con {
    height: 550px;
    div {
      background-color: blueviolet;
      height: 100%;
      text-align: center;
      line-height: 550px;
      font-size: 80px;
      color: wheat;
    }
  }
}