vue3实现两个切换栏不同数据

在Vue3中，为了实现在两个切换按钮控制下显示不同的数据，你可以采用以下步骤：

1. **设置数据结构**：
创建两个数组或对象分别存储你需要展示的数据，比如`data1`和`data2`。例如：

   data() {
     return {
       activeTab: 'data1', // 初始选择第一个数据集
       data1: [/* 数据列表1 */],
       data2: [/* 数据列表2 */]
     }
   }

2. **创建模板**：
使用`v-if`或`v-show`指令来条件渲染数据，当`activeTab`等于'data1'时，显示`data1`，反之则显示`data2`：

   <div>
     <button @click="activeTab = 'data1'">切换到数据1</button>
     <button @click="activeTab = 'data2'">切换到数据2</button>
     
     <ul v-if="activeTab === 'data1'">
       <li v-for="item in data1">{{ item }}</li>
     </ul>
     <ul v-if="activeTab === 'data2'">
       <li v-for="item in data2">{{ item }}</li>
     </ul>
   </div>

3. **绑定点击事件**：
在按钮的`@click`事件处理器中，改变`activeTab`变量的值，这样就会切换对应的`v-if`块的可见性。

以上就是基本的实现方式。如果你想使用更高级的动态路由或者Vue Router等库来实现，那会更为复杂一些，但是核心原理还是利用Vue的响应式系统来控制视图的显示和隐藏。