So zeigen Sie die Vue-Liste an

Vue.js ist ein beliebtes JavaScript-Framework, das zum Erstellen von Webschnittstellen und Single-Page-Anwendungen (SPA) verwendet werden kann. In Vue sind Listen eine sehr verbreitete Form der Datenpräsentation. In diesem Artikel werden einige gängige Methoden und Techniken von Vue-Listen vorgestellt.

1. Erstellen Sie eine Liste mit der V-for-Anweisung

Vue bietet die V-for-Anweisung, um ein Array oder Objekt zu durchlaufen und eine Liste zu erstellen. Wenn Sie v-for verwenden, können Sie das Element der aktuellen Iteration, den Index des Elements der aktuellen Iteration oder den Schlüssel der aktuellen Iteration (sofern es sich um ein Objekt handelt) verwenden.

Angenommen, wir haben eine Reihe von Filmen, die mehrere Filme enthält. Wir können v-for verwenden, um das Array zu durchlaufen und für jeden Film auf der Seite ein li-Tag zu erstellen:

<ul>
  <li v-for="movie in movies" :key="movie.id">{{ movie.title }}</li>
</ul>

In diesem Beispiel verwenden wir die v-for-Anweisung, um das Array movies zu durchlaufen und für jeden Film ein li zu erstellen Etikett. Wir geben außerdem ein Schlüsselattribut für jedes li-Tag an, was Vue dabei hilft, die Leistung beim erneuten Rendern der Liste zu optimieren.

2. Verwenden Sie berechnete Eigenschaften, um die Liste zu filtern oder zu sortieren

Manchmal müssen wir einen Teil der Daten aus der Liste filtern oder sortieren. Vue stellt berechnete Eigenschaften bereit, um diesen Zweck zu erreichen. Eine berechnete Eigenschaft ist eine Eigenschaft, die einen Rückgabewert dynamisch berechnen kann. Wenn sich die Eigenschaft, von der sie abhängt, ändert, wird sie neu berechnet und gibt einen neuen Wert zurück.

Angenommen, wir haben ein Array movies, das alle Filme enthält, und ein Array filteredMovies, das Filme enthält, die als „Action“ klassifiziert sind. Wir können berechnete Eigenschaften verwenden, um alle als „Aktion“ klassifizierten Filme herauszufiltern:

data() {
  return {
    movies: [...],
    genre: 'Action',
  }
},
computed: {
  filteredMovies() {
    return this.movies.filter(movie => movie.genre === this.genre)
  }
}

In diesem Beispiel definieren wir eine berechnete Eigenschaft namens filteredMovies in der berechneten Eigenschaft. Es verwendet die Methode Array.filter(), um Filme herauszufiltern, deren Genre dem aktuell ausgewählten Genre entspricht.

Ähnlich können wir berechnete Eigenschaften verwenden, um eine Liste zu sortieren. Beispielsweise können wir Filme basierend auf ihren Bewertungen in aufsteigender oder absteigender Reihenfolge sortieren:

data() {
  return {
    movies: [...],
    sortBy: 'rating',
    sortDirection: 'asc',
  }
},
computed: {
  sortedMovies() {
    return this.movies.sort((a, b) => {
      const sortOrder = this.sortDirection === 'asc' ? 1 : -1
      if (a[this.sortBy] < b[this.sortBy]) {
        return -1 * sortOrder
      }
      if (a[this.sortBy] > b[this.sortBy]) {
        return 1 * sortOrder
      }
      return 0
    })
  }
}

In diesem Beispiel definieren wir eine berechnete Eigenschaft „sortedMovies“ in der berechneten Eigenschaft. Es verwendet die Methode Array.sort(), um Filme basierend auf ihren Bewertungsattributen zu sortieren. Abhängig von der sortDirection-Eigenschaft kann die Sortierrichtung „asc“ (aufsteigend) oder „desc“ (absteigend) sein.

3. Verwenden von Listen mit Objekteigenschaften

In manchen Fällen ist unsere Liste möglicherweise nicht nur ein Array, sondern eine Sammlung verschachtelter Objekte. Diese Objekte können unterschiedliche Eigenschaften und Eigenschaftswerte haben.

Angenommen, wir haben ein Objekt „Filme“, das Filme enthält, wobei jeder Film ein Titelattribut und ein Genres-Array mit den Kategorien des Films hat. Mit der v-for-Direktive können wir wie unten gezeigt über Objekteigenschaften iterieren:

<template>
  <div v-for="(movie, key) in movies" :key="key">
    <h2>{{ movie.title }}</h2>
    <ul>
      <li v-for="genre in movie.genres" :key="genre">{{ genre }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movies: {
        1: {
          title: 'The Dark Knight',
          genres: ['Action', 'Crime', 'Drama'],
        },
        2: {
          title: 'Pulp Fiction',
          genres: ['Crime', 'Drama'],
        },
      },
    }
  },
}
</script>

In diesem Beispiel verwenden wir die v-for-Direktive, um über Objekteigenschaften zu iterieren. Wir verwenden Filmvariablen und Schlüsselvariablen, um das aktuell iterierte Objekt und den Schlüssel dieses Objekts darzustellen. Anschließend verwenden wir die v-for-Direktive, um die Kategorie jedes Films zu durchlaufen und ein li-Tag zu erstellen.

Zusammenfassung

In diesem Artikel haben wir einige gängige Methoden und Techniken für Vue-Listen vorgestellt. Wir haben gelernt, die v-for-Anweisung zu verwenden, um ein Array oder Objekt zu durchlaufen und eine Liste zu erstellen. Wir haben auch gelernt, wie man berechnete Eigenschaften zum Filtern und Sortieren von Listen verwendet. Schließlich haben wir gesehen, wie man mit Listen arbeitet, die Objekteigenschaften enthalten.

Vue ist ein sehr leistungsstarkes und flexibles Framework. Wir hoffen, dass dieser Artikel für Sie hilfreich ist und es Ihnen ermöglicht, Vue besser zum Erstellen von Listen zu nutzen.

Das obige ist der detaillierte Inhalt vonSo zeigen Sie die Vue-Liste an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!