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 @click="appear='component-a'">A</button>
      <button @click="appear='component-b'">B</button>
      <button @click="appear='component-c'">C</button>
    </div>
    <component :is="appear"></component>
  </div>

JavaScript

const app = Vue.createApp({
      setup() {
        const appear = Vue.ref("component-a");
        return {
          appear
        };
      },
    });
    app.component("component-a", {
      template: `我是元件A`,
    });
    app.component("component-b", {
      template: `元件B です`,
    });
    app.component("component-c", {
      template: `元件C 的部分`,
    });
    app.mount("#app");