Vue verwendet dynamische Komponenten, um einen TAB-Umschalteffekt zu erzielen

importiere eines aus "./components/one";
importiere zwei aus "./components/two";
importiere drei aus "./components/three";
importiere vier aus "./components/four";

Komponenten:
    eins,
    zwei,
    drei,
    vier,
  },

<Vorlage>
  <div id="app">
    <div Klasse="oben">
     <!-- Platzieren Sie die Registerkarte mit der Klickbeschriftung-->
    </div>
    <div Klasse="unten">
      <!-- Platzieren Sie dynamische Komponenten, um entsprechenden Inhalt darzustellen-->
    </div>
  </div>
</Vorlage>

// Zuerst definieren wir das Array cardArr in data, um die Daten des angeklickten Tabs zu speichern data() {
        zurückkehren {
          welcherIndex: 0,
          KarteArr: [
            {
              Komponentenname: "Dynamische Komponente 1",
            },
            {
              Komponentenname: "Dynamische Komponente 2",
            },
            {
              Komponentenname: „Dynamische Komponente Drei“,
            },
            {
              Komponentenname: „Dynamische Komponente Vier“,
            },
          ],
        };
      },
//Verwenden Sie dann eine v-for-Schleife, um <template> darzustellen
      <div id="app">
        <div Klasse="oben">
          <div
            Klasse = "crad"
            :Klasse="{ Highlight: welcherIndex == Index }"
            v-for="(Element, Index) in Kartenarr"
            :Schlüssel="Index"
            @click="welcherIndex = Index"
          >
            {{ item.componentName }}
          </div>
        </div>
        <div Klasse="unten">
          <!-- Dynamische Komponenten platzieren... -->
        </div>
      </div>
    </Vorlage>
// Da wir einen hervorgehobenen Zustand benötigen, setzen wir zunächst den Index 0 als erstes Hervorgehobenes und verwenden whichIndex und :class, die in data definiert sind, um dies zu erreichen // Hervorhebung style.highLight {
      Kastenschatten: 0 15px 30px rgba (0, 0, 0, 0,2);
      transformieren: übersetzen3d(0, -1px, 0);
    }

    // Das dynamische Komponenten-Tag <component/> hat ein is-Attribut. Der Wert von is bestimmt den Wert der Komponente.
    // Hier verwenden wir eine variable Komponenten-ID zum Speichern und zeigen die Komponenten-ID als <div class="bottom"> an.
        <Komponente: ist = "Komponenten-ID"></Komponente>
    </div>
    
    // Standardmäßig zeigen wir zuerst das Erste an. Gleichzeitig müssen wir dafür sorgen, dass der Komponentenname und die Komponenten-ID in der Kartenliste einander entsprechen.
    // Die Daten sollten also folgendermaßen geändert werden: data() {
        zurückkehren {
          welcherIndex: 0,
          componentId: "one", // Der Wert ist der Name der importierten Komponente, die wir im Komponentenobjekt cardArr registriert haben: [
            {
              Komponentenname: "Dynamische Komponente 1",
              componentId: "eins", // entspricht},
            {
              Komponentenname: "Dynamische Komponente 2",
              componentId: "zwei", // entspricht},
            {
              Komponentenname: „Dynamische Komponente Drei“,
              componentId: "drei", // um damit zu entsprechen},
            {
              Komponentenname: „Dynamische Komponente Vier“,
              componentId: "vier", // um damit zu entsprechen},
          ],
        };
      },

<Vorlage>
  <div id="app">
    <div Klasse="oben">
      <div
        Klasse = "crad"
        :Klasse="{ Highlight: welcherIndex == Index }"
        v-for="(Element, Index) in Kartenarr"
        :Schlüssel="Index"
        @klick="
          welcherIndex = Index;
          Komponenten-ID = Artikel.Komponenten-ID; 
        "
      >
          <!-- @click Sie können mehrere Operationscodes in das Tag schreiben, getrennt durch Semikolon -->
        {{ item.componentName }}
      </div>
    </div>
    <div Klasse="unten">
    <!-- Cache-Komponenten am Leben erhalten, damit die Komponenten nicht zerstört werden und das DOM nicht erneut gerendert wird.
    Der Browser führt keine Neuanordnung und Neudarstellung durch, sodass die Leistung optimiert werden kann. Wenn Sie es nicht verwenden, wird die Seite langsamer geladen.
      <am Leben erhalten>
        <Komponente: ist = "Komponenten-ID"></Komponente>
      </am Leben erhalten>
    </div>
  </div>
</Vorlage>

<Vorlage>
  <div id="app">
    <div Klasse="oben">
      <div
        Klasse = "crad"
        :Klasse="{ Highlight: welcherIndex == Index }"
        v-for="(Element, Index) in Kartenarr"
        :Schlüssel="Index"
        @klick="
          welcherIndex = Index;
          Komponenten-ID = Artikel.Komponenten-ID;
        "
      >
        {{ item.componentName }}
      </div>
    </div>
    <div Klasse="unten">
      <am Leben erhalten>
        <Komponente: ist = "Komponenten-ID"></Komponente>
      </am Leben erhalten>
    </div>
  </div>
</Vorlage>

<Skript>
importiere eines aus "./components/one";
importiere zwei aus "./components/two";
importiere drei aus "./components/three";
importiere vier aus "./components/four";
Standard exportieren {
  Komponenten:
    eins,
    zwei,
    drei,
    vier,
  },
  Daten() {
    zurückkehren {
      welcherIndex: 0,
      Komponenten-ID: "eins",
      KarteArr: [
        {
          Komponentenname: "Dynamische Komponente 1",
          Komponenten-ID: "eins",
        },
        {
          Komponentenname: "Dynamische Komponente 2",
          Komponenten-ID: "zwei",
        },
        {
          Komponentenname: „Dynamische Komponente Drei“,
          Komponenten-ID: "drei",
        },
        {
          Komponentenname: „Dynamische Komponente Vier“,
          Komponenten-ID: "vier",
        },
      ],
    };
  },
};
</Skript>

<style lang="less" scoped>
#app {
  Breite: 100 %;
  Höhe: 100vh;
  Box-Größe: Rahmenbox;
  Polsterung: 50px;
  .Spitze {
    Breite: 100 %;
    Höhe: 80px;
    Anzeige: Flex;
    Inhalt ausrichten: Abstand herum;
    .crad {
      Breite: 20 %;
      Höhe: 80px;
      Zeilenhöhe: 80px;
      Textausrichtung: zentriert;
      Hintergrundfarbe: #fff;
      Rand: 1px durchgezogen #e9e9e9;
    }
    .highLight {
      Kastenschatten: 0 15px 30px rgba (0, 0, 0, 0,2);
      transformieren: übersetzen3d(0, -1px, 0);
    }
  }
  .unten {
    Rand oben: 20px;
    Breite: 100 %;
    Höhe: berechnet (100 % – 100 Pixel);
    Rand: 3px durchgehend rosa;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
  }
}
</Stil>