根本原因是因为eclipse缺少了springboot的插件

需要我们下载最新版的sts插件

下载完成之后会让你重新启动，启动之后就可以使用了

方法一.切换选项卡时，内容改变，内容的样式不同。

定义索引：默认选中选项一

切换选项卡的索引方法

这是效果

方法二.切换选项卡时，内容改变，内容的样式相同。

定义导航栏选项和索引，默认第一个

切换索引

这是效果

最后附上代码:

<template>
  <view class="new-file">
    
    <!-- 第一种方法 -->
    <!-- 头部选项卡 -->
   <view class="head-nav">
      <view :class="navIndex==1?'activite':''" @click="checkIndex(1)">选项一</view>
      <view :class="navIndex==2?'activite':''" @click="checkIndex(2)">选项二</view>
    </view>
    <!-- 内容切换 -->
   <view class="content" v-if="navIndex==1">
      我是选项一
    </view>
    <view class="content" v-if="navIndex==2">
      我是选项二
    </view>
    
    <!-- 第二种方法 -->
    <view class="head-nav">
      <!-- 头部选项卡 -->
     <view :class="listIndex==y?'activite':''" @click="checkListIndex(y)" v-for="(x,y) in navList" :key="y">{{x}}</view>
    </view>
    <!-- 内容 -->
    <view class="content" v-for="(x,y) in navList" :key="y">
       <view class="" v-if="listIndex==y">
         <view class="box">盒子</view>
       </view>
    </view>
    
    
    
  </view>
  
</template>

<script>
  export default{
    data(){
      return{
        navIndex:1,
        
        navList:["选项卡一","选项卡二"],
        listIndex:0
      }
    },
    methods:{
      checkIndex(index){
        this.navIndex =index;
      },
      
      checkListIndex(index){
        this.listIndex=index;
      }
    }
  }
</script>

<style scoped>
  .head-nav{
    width: 50%;
    margin:20rpx auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .activite{
    font-weight: bold;
    border-bottom: 6rpx solid #0065d9;
  }
  .head-nav>view{
    padding-bottom: 10rpx;
  }
  .box{background: #008000;}
</style>
 

遇到问题：

安装软件需要获取截屏和屏幕录制的功能权限，但发现打开系统设置->安全性与隐私-屏幕录制，右边竟然没有可勾选或可添加的App选项

产生原因：

经过网络搜索关键字，发现是因为系统升级到10.5,Mac CataLina过程中位于/Library/Application Support/com.apple.TCC目录下的TCC.db文件损坏了。
期间遇到的错误提示（Error: table access has 7 columns but 12 values were supplied）

解决办法：

第一步：关闭SIP功能
1.重启电脑，进入恢复模式（电脑启动时按住CMD + R，直到看到Apple徽标为止）

2.转到顶部菜单，选择实用程序，然后选择终端。

3.使用以下命令关闭SIP：    

csrutil disable

4.转到顶部菜单，然后选择“ Apple徽标”和“重新启动”。

第二步：修复系统的TCC.db文件
在终端中敲下如下命令

sudo chmod 777 /Library/Application\ Support/com.apple.TCC

sudo rm -rf /Library/Application\ Support/com.apple.TCC/TCC.db

第三步：在TCC.db文件中插入字段 或者打开对应软件后此处为OBS Studio会提示需要屏幕录制权限 选给权限即可
字段的区别就是App的BundleID 以及最后一位的数字可以打开应用显示包内容，在Info.plist中能找到如com.tencent.xinWeChat就是微信的BundleID
最后一位的数字 应该是在TCC.db中能看到的 具体查看方式可以研读下How To Edit The SIP Protected TCC.db File On macOS Sierra 10.12.2 And Later https://hcsonline.com/images/PDFs/How_To_Edit_The_SIP_Protected_TCC.db_File_On_macOS_Sierra_10.12.2_And_Later.pdf

微信 sudo /usr/bin/sqlite3 /Library/Application\ Support/com.apple.TCC/TCC.db "INSERT or REPLACE INTO access VALUES('kTCCServiceScreenCapture','com.tencent.xinWeChat',0,1,1,NULL,NULL,NULL,'UNUSED',NULL,0,1585206453);"

QQ sudo /usr/bin/sqlite3 /Library/Application\ Support/com.apple.TCC/TCC.db "INSERT or REPLACE INTO access VALUES('kTCCServiceScreenCapture','com.tencent.qq',0,1,1,NULL,NULL,NULL,'UNUSED',NULL,0,1585206581);"

腾讯会议 sudo /usr/bin/sqlite3 /Library/Application\ Support/com.apple.TCC/TCC.db "INSERT or REPLACE INTO access VALUES('kTCCServiceScreenCapture','com.tencent.meeting',0,1,1,NULL,NULL,NULL,'UNUSED',NULL,0,1585206926);"

参考以下文章，感谢！

[1]https://discussionschinese.apple.com/thread/251243787
[2]https://blog.csdn.net/dangai0201/article/details/104248535
[3]https://blog.csdn.net/qq_40673345/article/details/104272552