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='A'">A</button>
    <button @click="appear='B'">B</button>
    <button @click="appear='C'">C</button>
  </div>
  <component-A v-if="appear =='A'"></component-A>
  <component-B v-if="appear =='B'"></component-B>
  <component-C v-if="appear =='C'"></component-C>
</div>

JavaScript

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