vue3+ts实现简单的选项卡

 第一种（不推荐使用）

<template>
  <div class="Tab">
    <button v-for="(item, index) in arr" :key="index" :class="index === Index ? 'ac' : ''" @click="FnClick(index)">按钮{{ item }}</button>

    <div v-for="(item, index) in arr" :key="index" :style="{display:Index==index?'block':'none'}">内容{{ item }}</div>
  </div>
</template>

<script setup lang="ts">
// 引入vue
import { ref } from 'vue'
const arr = [1, 2, 3]
// 定义下标
const Index = ref<number>(0)
const FnClick = (index: number) => {
  Index.value = index
}
</script>

<style scoped lang="less">
.Tab {
  button.ac {
    background-color: red;
  }
  div {
    width: 320px;
    height: 280px;
    border: 1px solid #000;
    display: none;
  }
}
</style>

  第二种

<template>
  <div class="increment">
    <div class="tab">
      <button v-for="(item,index) in buuton" :key="item.id" :class="Index==index?'ac':'' " @click="Fnclick(index)">{{ item.value }}</button>
      <div v-for="(item,index) in con" :key="item.id" :style="{display:Index==index?'block':'none'}">{{ item.value }}</div>
    </div>
  </div>
</template>
<style scoped lang="less">
  .increment{
    .tab button.ac{
      background-color: red;
    }
    .tab div{
      width: 280px;
      height: 180px;
      border: 1px solid #000;
      display: none;
    }
  }
</style>

<script setup lang="ts">
import { ref } from 'vue'
interface iBuuton {
  id: string
  value: string
}
interface iCon {
  id: string
  value: string
}

const Index=ref<number>(0)

const Fnclick = (index: number) => {
  Index.value = index
}

// 选项卡
const buuton = ref<iBuuton[]>([
  {
    id: 'b1',
    value: '按钮一'
  },
  {
    id: 'b2',
    value: '按钮二'
  },
  {
    id: 'b3',
    value: '按钮三'
  }
])
const con = ref<iCon[]>([
  {
    id: 'c1',
    value: '内容一'
  },
  {
    id: 'c2',
    value: '内容二'
  },
  {
    id: 'c3',
    value: '内容三'
  }
])
</script>