Vue3选项卡

最新推荐文章于 2025-08-26 20:31:56 发布

原创最新推荐文章于 2025-08-26 20:31:56 发布 · 757 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文详细介绍了如何在Vue3中实现动态选项卡切换功能，包括使用Vue3的Composition API来管理状态，以及结合Vue Router实现路由跳转。通过实例代码解析，展示了组件化开发的思路和步骤。

<template>
  <div class="tab">
      <input v-for="(item,index) in tabButton" @click="FnStart(index)" :key="item.ID" :class="index===tabIndex?'btn ac':'ac'" type="button" :value="item.text"/>
      <div v-for="(item,index) in tabCont"  :key="item.ID" :style="{display:tabIndex===index?'block':'none'}" class="item">{{item.text}}</div>
  </div>
</template>
 
<script setup lang="ts"> 
import {ref} from "vue";
interface info{
    ID:string,
    text:string
}
const tabIndex=ref<number>(0)
const tabButton=ref<info[]>([
    {
        ID:'btn1',
        text:'按钮一'
    },
    {
        ID:'btn2',
        text:'按钮二'
    }, 
    {
        ID:'btn3',
        text:'按钮三'
    }
]);
const tabCont=ref<info[]>([
    {
        ID:'con1',
        text:'内容一'
    },
    {
        ID:'con2',
        text:'内容二'
    }, 
    {
        ID:'con3',
        text:'内容三'
    }
])
const FnStart=function(index:number){
    tabIndex.value=index
}
</script>
 
<style lang="less" scoped>
.tab{
    .btn.ac{
        background-color: red;
    }
    .item{
        width: 360px;
        height: 280px;
        border: 1px solid #ccc;
        display: none;
    }
}
</style>