VUE3-Schnellstart: Verwenden der Vue.js-Anweisungen zum Wechseln der Registerkarten

Dieser Artikel soll Anfängern helfen, schnell mit Vue.js 3 zu beginnen und einen einfachen Tab-Wechsel-Effekt zu erzielen. Vue.js ist ein beliebtes JavaScript-Framework, mit dem Sie wiederverwendbare Komponenten erstellen, den Status Ihrer Anwendung einfach verwalten und Interaktionen mit der Benutzeroberfläche verwalten können. Vue.js 3 ist die neueste Version des Frameworks. Im Vergleich zu früheren Versionen wurden große Änderungen vorgenommen, die Grundprinzipien haben sich jedoch nicht geändert. In diesem Artikel verwenden wir Vue.js-Anweisungen, um den Tab-Wechseleffekt zu implementieren, mit dem Ziel, die Leser mit der allgemeinen Syntax und den Konzepten von Vue.js vertraut zu machen.

Im ersten Schritt müssen wir eine Vue-Instanz erstellen und diese dann in ein DOM-Element auf der HTML-Seite einhängen. In Vue.js 3 ähnelt die Methode zum Erstellen einer Vue-Instanz der von Vue.js 2. Übergeben Sie einfach ein Objekt als Parameter. Wir müssen in der Vue-Instanz auch eine Dateneigenschaft tabs deklarieren, die den Titel und den Inhalt des Tabs enthält.

<div id="app">
  <ul>
    <li v-for="(tab, index) in tabs" :key="index" @click="activeTabIndex = index">{{ tab.title }}</li>
  </ul>
  <div v-for="(tab, index) in tabs" :key="index" v-show="activeTabIndex === index">{{ tab.content }}</div>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      tabs: [
        {
          title: 'Tab 1',
          content: 'This is the content for Tab 1'
        },
        {
          title: 'Tab 2',
          content: 'This is the content for Tab 2'
        },
        {
          title: 'Tab 3',
          content: 'This is the content for Tab 3'
        }
      ],
      activeTabIndex: 0
    }
  }
})

app.mount('#app')
</script>

Im obigen Code verwenden wir die v-for-Direktive, um das Loop-Tabs-Array zu durchlaufen, verwenden die :key-Direktive, um einen eindeutigen Bezeichner für jedes Element festzulegen, und die @click-Direktive bindet das Klickereignis des Tabs, When Wird auf eine Registerkarte geklickt, wird ihr Indexwert der Dateneigenschaft activeTabIndex zugewiesen. Verwenden Sie gleichzeitig den Befehl v-show, um den entsprechenden Tab-Inhalt entsprechend dem Wert von activeTabIndex anzuzeigen oder auszublenden.

Jetzt haben wir die Vue-Instanz erfolgreich erstellt und auf der HTML-Seite gemountet. Als nächstes müssen wir Stile schreiben, um das Erscheinungsbild der Registerkarte zu verbessern.

ul {
  display: flex;
  list-style: none;
  padding: 0;
  background-color: #eee;
}

li {
  padding: 10px;
  cursor: pointer;
}

li:hover {
  background-color: #ddd;
}

li.active {
  background-color: #fff;
}

div {
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
}

Im obigen Stil haben wir einige grundlegende Stile für die Tab-Liste und den Tab-Inhaltsblock festgelegt, z. B. Hintergrundfarbe, Rahmen, Abstand usw. Darüber hinaus haben wir auch die Stile :hover und .active für das li-Element des Tabs definiert. Wenn die Maus über den Tab fährt, ändert sich die Hintergrundfarbe, wenn der Tab aktiv ist.

Zu diesem Zeitpunkt haben wir das grundlegende Layout und den Stil der Registerkarte fertiggestellt. Abschließend sollten wir noch einige abschließende Arbeiten in der Vue-Instanz durchführen, um sicherzustellen, dass der Tab-Wechsel reibungslos und korrekt erfolgt.

<div id="app">
  <ul>
    <li v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTabIndex === index }" @click="activeTabIndex = index">{{ tab.title }}</li>
  </ul>
  <div v-for="(tab, index) in tabs" :key="index" v-show="activeTabIndex === index">{{ tab.content }}</div>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      tabs: [
        {
          title: 'Tab 1',
          content: 'This is the content for Tab 1'
        },
        {
          title: 'Tab 2',
          content: 'This is the content for Tab 2'
        },
        {
          title: 'Tab 3',
          content: 'This is the content for Tab 3'
        }
      ],
      activeTabIndex: 0
    }
  },
  watch: {
    activeTabIndex(newValue, oldValue) {
      console.log(`The active tab index has changed from ${oldValue} to ${newValue}`)
    }
  },
  mounted() {
    console.log('Vue app has been mounted to the DOM')
  }
})

app.mount('#app')
</script>

Im obigen Code verwenden wir die :class-Direktive, um die CSS-Klasse des li-Elements entsprechend dem Aktivierungsstatus der Registerkarte dynamisch zu binden, um die Registerkarte zu formatieren. Darüber hinaus verwenden wir das Watch-Attribut auch, um Änderungen im activeTabIndex zu überwachen und die Änderungsinformationen auf der Konsole auszugeben. Abschließend verwenden wir die Hook-Funktion „mounted lifecycle“, um sicherzustellen, dass die Vue-Anwendung erfolgreich im DOM gemountet wurde.

Jetzt haben wir ein vollständiges Beispiel für eine Vue.js 3-Tab-Komponente fertiggestellt. Durch das Studium dieses Artikels sollten wir die häufig verwendete Syntax und Konzepte von Vue.js verstanden haben, einschließlich: Anweisungen, Dateneigenschaften, berechnete Eigenschaften, Lebenszyklus-Hooks usw.

Natürlich ist dieser Artikel nur die Spitze des Eisbergs von Vue.js. In zukünftigen Studien sollten wir Routing, Statusverwaltung, Plug-Ins usw. mehr Aufmerksamkeit schenken. Ich hoffe, dass dieser Artikel für Entwickler und Enthusiasten hilfreich ist, die Vue.js 3 erlernen möchten.

Das obige ist der detaillierte Inhalt vonVUE3-Schnellstart: Verwenden der Vue.js-Anweisungen zum Wechseln der Registerkarten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!