Vue3利用:class实现tab切换框

原因：

今天项目突然一看是没有框架只能自己实现tabs切换功能，我想了想，感觉源码来的快，但是最近这个项目是用vue3去写，我又不太熟，在网上找例子好像没什么用vue3去实现的，只看到了vue2的，但是感觉写法都差不多，所以就感觉可以照着去写，话不多说，上代码

 

<div class="headerInfo">
   //判断定义的值是否等于index，如果等于index则高亮
   <div
    :class="[backshow == index ? 'backgShow' : '']"
    v-for="(item, index) in headerTitle"
    :key="index"
    //点击之后传index的值到下方
    @click="activeHandle(index)"
    >
      {{ item.title }}
    </div>
</div>
//script标签中加上setup就不用每次都返回return数据出去了
<script setup lang="ts">
//这个定义无关紧要
// tbas切换定义一个值为0
let backshow = ref(0);
// 当点击按钮之后让上方定义的等于传过来的值
let activeHandle = (index: number) => {
  backshow.value = index;
};
// tabs切换文字信息
const headerTitle = reactive([
  {
    title: "矿业权信息",
  },
  {
    title: "出价记录",
  },
  {
    title: "出让公告",
  },
  {
    title: "出让须知",
  },
  {
    title: "竞买条件",
  },
  {
    title: "矿区现场图",
  },
  {
    title: "下载文件",
  },
]);
</script>
<style>
//点击之后上方判断相等则显示背景颜色
.backgShow {
  color: white;
  background-color: #478de3;
}
</style>

话就不多说了，详解都在代码里

技术栈

Vue3    javascript  typescipt