vue3原生tab切换

可以使用Vue3中的动态组件和v-if指令来实现原生的tab切换效果。

首先，在模板中定义tab切换的菜单，使用v-for指令遍历菜单列表，为每个菜单绑定一个点击事件，点击时切换到对应的内容区域：

<template>
  <div class="tab-container">
    <div class="tab-menu">
      <div 
        class="tab-item"
        v-for="(menu, index) in menus"
        :key="index"
        @click="activeTab = index"
        :class="{ active: activeTab === index }">
        {{ menu.title }}
      </div>
    </div>
    <div class="tab-content">
      <component 
        v-for="(menu, index) in menus"
        :key="index"
        v-if="activeTab === index"
        :is="menu.component">
      </component>
    </div>
  </div>
</template>

然后在组件中定义菜单列表和当前激活的tab索引：

<script>
export default {
  data() {
    return {
      menus: [
        { title: 'Tab 1', component: 'Tab1' },
        { title: 'Tab 2', component: 'Tab2' },
        { title: 'Tab 3', component: 'Tab3' }
      ],
      activeTab: 0
    }
  }
}
</script>

最后定义各个tab内容组件：

<script>
export default {
  name: 'Tab1',
  template: '<div>Tab 1 Content</div>'
}
</script>

<script>
export default {
  name: 'Tab2',
  template: '<div>Tab 2 Content</div>'
}
</script>

<script>
export default {
  name: 'Tab3',
  template: '<div>Tab 3 Content</div>'
}
</script>

这样，就可以实现原生的tab切换效果了。