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>
    <keep-alive>
      <component :is="appearComponent"></component>
    </keep-alive>
  </div>

JavaScript

const app = Vue.createApp({
      setup() {
        const tabs = Vue.ref(["A", "B"]);
        const currentTab = Vue.ref("A");
        const appearComponent = Vue.computed(() => {
          return `component-${currentTab.value.toLowerCase()}`;
        });
        return {
          tabs, currentTab, appearComponent
        };
      },
    });
    app.component("component-a", {
      template: `輸入框A： <input type="text">`,
    });
    app.component("component-b", {
      template: `輸入框B： <input type="text">`,
    });
    app.mount("#app");