Vue3でタブ切り替えを実装する

Vue3でタブ切り替えを実装してみます。
今回は、簡単に試せるようにCDNを使用してVue3を使用できるようにしています。

Vue3でタブ切り替えを実装する

<div id="tab">
    <div class="tab-gp">
      <ul class="tab-btn">
        <li @click="select('1')" v-bind:class="{'active': show == '1'}">
          タブ1ボタン
        </li>
        <li @click="select('2')" v-bind:class="{'active': show == '2'}">
          タブ2ボタン
        </li>
      </ul>
      <div class="tab-content">
        <div v-if="show == '1'" class="tab-item">タブ1の内容</div>
        <div v-else-if="show == '2'" class="tab-item">タブ2の内容</div>
      </div>
    </div>
 </div>

<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>

const tab = Vue.createApp({
  data() {
    return {
      show: "1",
    };
  },
  methods: {
    select: function (num) {
      this.show = num;
    },
  },
});
tab.mount("#tab");