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" 
             :class="index===Index ? 'act':''">
     内容{
   
   {item}}
  </div>

  </div>

</template> 


<script setup lang="ts">

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 { 
     width: 100px;
     height: 50px;
      margin: 5px;
 }
 button.ac {
 background-color: red; }
      div {
      width: 400px;
      height: 300px;
      border: 1px solid #000;
      display: none;
      }
div.act {
        display: block;
      }
}
</style>