Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit Vue eine Funktion zum Wechseln der Tab-Leiste implementieren

Durch die kontinuierliche Weiterentwicklung der Front-End-Technologie hat sich Vue zu einem der beliebtesten JavaScript-Frameworks entwickelt. Das Aufkommen von Vue macht die Front-End-Entwicklung einfacher und effizienter. In Vue können wir durch Anweisungen und Komponenten eine komplexe Schnittstelle erstellen. Unter diesen werden häufig Tab-Leisten in der Navigationsleiste oder auf den Registerkarten von Websites angezeigt. In diesem Artikel wird erläutert, wie Sie mit Vue den Tab-Leistenwechsel implementieren.

1. Erstellen Sie ein Vue-Projekt

Zuerst müssen Sie die Vue-CLI installieren und den folgenden Befehl ausführen:

npm install -g vue-cli

Dann erstellen Sie ein neues Projekt und führen den folgenden Befehl aus:

vue init webpack my-tab

Dieser Befehl erstellt ein neues Projekt mit dem Namen „ mein-tab" . Nachdem Sie bestätigt haben, dass das Projekt erfolgreich erstellt wurde, geben Sie bitte den Projektordner ein.

2. Erstellen Sie Tab-Komponenten

Erstellen Sie im Verzeichnis src/components einen Ordner mit dem Namen „tabs“ und erstellen Sie darin zwei Unterkomponenten der linken Tab-Liste und des rechten Inhaltsbereichs mit dem Namen „tab“. „Header“ und „Tab-Bereich“.

In der Tab-Header-Komponente müssen wir die v-for-Anweisung verwenden, um die Tab-Liste zu durchlaufen. Der Code lautet wie folgt:

<template>
  <div>
    <ul>
      <li v-for="(tab, index) in tabs" :key="index" :class="{active: currentIndex === index}">
        <a href="#" @click="changeTab(index)">{{tab}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: ['tabs'],
    data () {
      return {
        currentIndex: 0
      }
    },
    methods: {
      changeTab (index) {
        this.currentIndex = index
        this.$emit('tab-change', index)
      }
    }
  }
</script>

Diese Komponente verwendet Requisiten, um die von der übergeordneten Komponente übergebenen Tab-Listendaten zu akzeptieren, und verwendet die v-for-Anweisung, um die Liste zu durchlaufen, den Wert von currentIndex entsprechend der aktuell ausgewählten Registerkarte zu ändern und Lösen Sie eine Meldung mit dem Namen „Tab-Change“ aus, ein benutzerdefiniertes Ereignis.

In der Tab-Pane-Komponente müssen wir basierend auf dem Wert von currentIndex entscheiden, welcher Inhaltsbereich gerendert werden soll. Der Code lautet wie folgt:

<template>
  <div>
    <div v-for="(pane, index) in panes" :key="index" v-show="currentIndex === index">
      {{ pane }}
    </div>
  </div>
</template>

<script>
  export default {
    props: ['panes', 'currentIndex'],
  }
</script>

Diese Komponente akzeptiert zwei Requisiten, Panes und currentIndex, verwendet die v-for-Anweisung zum Durchlaufen von Panes und zeigt den entsprechenden Inhaltsbereich entsprechend dem Wert von currentIndex an. Diese Inhaltsbereiche können beliebige Elemente sein, wie z. B. p-Tags, img-Tags usw.

3. Verwenden Sie die Tab-Komponente in der übergeordneten Komponente.

In der übergeordneten Komponente müssen wir die Daten an die Tab-Header- und Tab-Pane-Komponenten übergeben und die vom Benutzer ausgewählte Registerkarte basierend auf dem Wert von currentIndex bestimmen .

<template>
  <div>
    <tab-header :tabs="tabs" @tab-change="tabChange"></tab-header>
    <tab-pane :panes="panes" :currentIndex="currentIndex"></tab-pane>
  </div>
</template>

<script>
  import TabHeader from './tabs/tab-header'
  import TabPane from './tabs/tab-pane'

  export default {
    data () {
      return {
        tabs: ['Tab1', 'Tab2', 'Tab3'],
        panes: ['Content1', 'Content2', 'Content3'],
        currentIndex: 0
      }
    },
    components: {
      TabHeader,
      TabPane
    },
    methods: {
      tabChange (index) {
        this.currentIndex = index
      }
    }
  }
</script>

In der übergeordneten Komponente müssen wir die Tab-Header- und Tab-Pane-Komponenten importieren und sie als lokale Komponenten registrieren. Darüber hinaus müssen wir drei Datenelemente definieren: Tabs, Panes und CurrentIndex und nach Bedarf Werte zuweisen. Schließlich verwenden wir die Tab-Header- und Tab-Pane-Komponenten in der Vorlage und binden benutzerdefinierte Ereignisse.

Dies ist ein einfaches Beispiel, das Sie je nach Bedarf ändern und erweitern können. Zu diesem Zeitpunkt ist der Prozess der Verwendung von Vue zum Wechseln der Registerkarten abgeschlossen.

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen Schritt für Schritt bei, wie Sie mit Vue eine Funktion zum Wechseln der Tab-Leiste implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!