## Vue 的簡單版

<script>
export default {
  data() {
    return {
      page: 1,
    }
  },
  methods: {
    isPage(num){
      if(num==1){
        this.page =1
      } else if(num==2){
        this.page=2
      }
    }
  }
}
</script>

<template>
  <button @click="isPage(1)">a</button>
  <button @click="isPage(2)">b</button>
  <h1 v-show="this.page == 1">Vue is awesome!</h1>
  <h1 v-show="this.page == 2">Oh no 😢</h1>
</template>

Ａ如下圖：


Ｂ如下圖：


<br>

## Vue 的加強版

<template>

  <!-- tab 按鈕區 -->
  <div class="row flex-row d-flex justify-center mt-4">
    <div class="btn v-col-5 me-1 text-center"
      v-for="purchaseTab in purchaseTabs"
      @click="isTab(purchaseTab.value)"
      :key="purchaseTab.value">
      {{ purchaseTab.label }}
    </div>
    
    <!-- tab 內容區 -->
    <div v-for="purchaseTab in purchaseTabs" :key="purchaseTab.value">
      <div v-show="tabContent == purchaseTab.value">
        <component :is="purchaseTab.component"></component>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { PURCHASE_TAB } from '@/constant'
import Transact from '@/components/mine/Transact.vue'
import Subscript from '@/components/mine/Subscript.vue'

const purchaseTabs = [
  { label: 'Transactions', value: PURCHASE_TAB.TRANSACT, component: Transact },
  { label: 'Subscriptions', value: PURCHASE_TAB.SUBSCRIPT, component: Subscript },
]

const tabContent = ref(PURCHASE_TAB.TRANSACT)
function isTab(num) {
  if (num === PURCHASE_TAB.TRANSACT) {
    tabContent.value = PURCHASE_TAB.TRANSACT
  } else if (num === PURCHASE_TAB.SUBSCRIPT) {
    tabContent.value = PURCHASE_TAB.SUBSCRIPT
  }
}
</script>

:::info
:bulb: 其他做法參考

Css: https://codepen.io/54ziziyo/pen/PoxQqEb

jQuery: https://codepen.io/54ziziyo/pen/WNYMrRN

:::