如何根据VueJS中激活的菜单选项卡在同一按钮上的功能之间进行切换？

<template>
  <div>
    <button @click="toggleTab('tab1')" :class="{ active: activeTab === 'tab1' }">Tab 1</button>
    <button @click="toggleTab('tab2')" :class="{ active: activeTab === 'tab2' }">Tab 2</button>
    <button @click="toggleTab('tab3')" :class="{ active: activeTab === 'tab3' }">Tab 3</button>

    <div v-if="activeTab === 'tab1'">
      <!-- Tab 1 的功能内容 -->
    </div>
    <div v-if="activeTab === 'tab2'">
      <!-- Tab 2 的功能内容 -->
    </div>
    <div v-if="activeTab === 'tab3'">
      <!-- Tab 3 的功能内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1'
    };
  },
  methods: {
    toggleTab(tab) {
      this.activeTab = tab;
    }
  }
};
</script>

<style>
.active {
  /* 激活状态的样式 */
}
</style>