vue3原生tab切换

在 Vue 3 中，可以使用 `v-if` 指令和 `computed` 属性来实现原生的 Tab 切换。以下是一个示例：

<template>
  <div>
    <button @click="activeTab = 'tab1'">Tab 1</button>
    <button @click="activeTab = 'tab2'">Tab 2</button>
    <button @click="activeTab = 'tab3'">Tab 3</button>

    <div v-if="activeTab === 'tab1'">
      <!-- Tab 1 content -->
    </div>

    <div v-if="activeTab === 'tab2'">
      <!-- Tab 2 content -->
    </div>

    <div v-if="activeTab === 'tab3'">
      <!-- Tab 3 content -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1'
    }
  },
  computed: {
    tab1Active() {
      return this.activeTab === 'tab1'
    },
    tab2Active() {
      return this.activeTab === 'tab2'
    },
    tab3Active() {
      return this.activeTab === 'tab3'
    }
  }
}
</script>

在上面的示例中，我们使用 `v-if` 指令来根据当前选中的 Tab 显示对应的内容。我们还使用 `computed` 属性来计算每个 Tab 是否处于活动状态，以便在需要时对其进行样式设置。