v u e 3.0写选项卡

最新推荐文章于 2024-03-28 15:30:37 发布

樱颜

最新推荐文章于 2024-03-28 15:30:37 发布

阅读量402

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_58160355/article/details/124430895

版权

本文档介绍如何使用Vue 3.0搭建一个新的项目，并实现选项卡功能。首先，通过Vue CLI创建Vue 3.0项目，然后展示了一个选项卡组件的示例代码，并强调了配置路由的重要性。

摘要由CSDN通过智能技术生成

先要下载vue3.0,

在views里新建vue项目

先看效果图：

然后复制粘贴下面的代码

<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)