Comment afficher la liste des vues

Vue.js est un framework JavaScript populaire qui peut être utilisé pour créer des interfaces Web et des applications monopage (SPA). Il est très puissant et flexible. Dans Vue, les listes sont une forme très courante de présentation de données. Cet article présentera quelques méthodes et techniques courantes des listes Vue.

1. Créez une liste à l'aide de l'instruction v-for

Vue fournit l'instruction v-for pour parcourir un tableau ou un objet et créer une liste. Lorsque vous utilisez v-for, vous pouvez utiliser l'élément de l'itération en cours, l'index de l'élément de l'itération en cours ou la clé de l'itération en cours (s'il s'agit d'un objet).

Par exemple, supposons que nous ayons un tableau de films comprenant plusieurs films. Nous pouvons utiliser v-for pour parcourir le tableau afin de créer une balise li pour chaque film sur la page :

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

Dans cet exemple, nous utilisons l'instruction v-for pour parcourir le tableau films et créer un li pour chaque film Étiquette. Nous spécifions également un attribut clé pour chaque balise li, ce qui aide Vue à optimiser les performances lors du nouveau rendu de la liste.

2. Utilisez des propriétés calculées pour filtrer ou trier la liste

Parfois, nous devons filtrer ou trier une partie des données de la liste, Vue fournit des propriétés calculées pour atteindre cet objectif. Une propriété calculée est une propriété qui peut calculer dynamiquement une valeur de retour lorsque la propriété dont elle dépend change, elle sera recalculée et renverra une nouvelle valeur.

Par exemple, supposons que nous ayons un tableau movies contenant tous les films et un tableau filteredMovies contenant des films classés comme « Action ». Nous pouvons utiliser des propriétés calculées pour filtrer tous les films classés comme « Action » :

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

Dans cet exemple, nous définissons une propriété calculée appelée filteredMovies dans la propriété calculée. Il utilise la méthode Array.filter() pour filtrer les films dont le genre est égal au genre actuellement sélectionné.

De même, nous pouvons utiliser des propriétés calculées pour trier une liste. Par exemple, nous pouvons trier les films par ordre croissant ou décroissant en fonction de leurs notes :

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
    })
  }
}

Dans cet exemple, nous définissons une propriété calculée sortedMovies dans la propriété calculée. Il utilise la méthode Array.sort() pour trier les films en fonction de leurs attributs de notation. Selon la propriété sortDirection, le sens du tri peut être « asc » (croissant) ou « desc » (décroissant).

3. Utiliser des listes avec des propriétés d'objet

Dans certains cas, notre liste peut ne pas être simplement un tableau, mais une collection d'objets imbriqués. Ces objets peuvent avoir des propriétés et des valeurs de propriété différentes.

Supposons que nous ayons un objet films contenant des films, où chaque film a un attribut de titre et un tableau de genres contenant les catégories du film. Nous pouvons parcourir les propriétés de l'objet à l'aide de la directive v-for comme indiqué ci-dessous :

<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>

Dans cet exemple, nous utilisons la directive v-for pour parcourir les propriétés de l'objet. Nous utilisons des variables de film et des variables clés pour représenter l'objet actuellement itéré et la clé de cet objet. Nous utilisons ensuite la directive v-for pour parcourir la catégorie de chaque film et créer une balise li.

Résumé

Dans cet article, nous avons présenté quelques méthodes et techniques courantes pour les listes Vue. Nous avons appris à utiliser l'instruction v-for pour parcourir un tableau ou un objet et créer une liste. Nous avons également appris à utiliser les propriétés calculées pour filtrer et trier les listes. Enfin, nous avons vu comment travailler avec des listes contenant des propriétés d'objet.

Vue est un framework très puissant et flexible, nous espérons que cet article vous sera utile et vous permettra de mieux utiliser Vue pour créer des listes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!