JSFiddle - React, Tailwind, and code Playground

by imall

HTML

<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.js"></script>
  <div id="app">
    <div class="label">
      <button v-for="tab in tabs"
      :key="tab"
      @click="currentTab = tab">{{tab}}</button>

    </div>
    <component :is="appearComponent"></component>
  </div>

JavaScript

const app = Vue.createApp({
      setup() {
        const tabs = Vue.ref(["A", "B", "C"]);
        const currentTab = Vue.ref("A");
        const appearComponent = Vue.computed(() => {
          return `component-${currentTab.value.toLowerCase()}`;
        });
        return {
          tabs,currentTab,appearComponent
        };
      },
    });
    app.component("component-a", {
      template: `我是元件A`,
    });
    app.component("component-b", {
      template: `元件B です`,
    });
    app.component("component-c", {
      template: `元件C 的部分`,
    });
    app.mount("#app");