Fonction v-for dans Vue3 : solution parfaite pour lister le rendu des données

Dans Vue3, v-for est considéré comme le meilleur moyen de restituer les données d'une liste. v-for est une directive dans Vue qui permet aux développeurs de parcourir un tableau ou un objet et de générer un morceau de code HTML pour chaque élément. La directive v-for est l'une des directives de modèle les plus puissantes disponibles pour les développeurs. Dans Vue3, l'instruction v-for a été encore optimisée, la rendant plus facile à utiliser et plus flexible.

Le plus gros changement de la directive v-for dans Vue3 est la liaison des éléments. Dans Vue2, l'utilisation de la directive v-for nécessite de donner à chaque élément un attribut clé afin que Vue puisse suivre l'état de chaque élément. Cela peut entraîner une complexité inutile dans certains cas. Dans Vue3, l'instruction v-for utilise un nouveau style de clé, qui peut utiliser directement la valeur comme clé, évitant ainsi le code et les calculs inutiles.

Les avantages de la directive v-for dans Vue3 ne s'arrêtent pas là. Vue3 prend également en charge les fonctions v-for définies par l'utilisateur afin que les développeurs puissent parcourir les tableaux à leur manière. La fonction v-for personnalisée peut itérer n'importe quel type de structure de données et contrôler de manière flexible le processus d'itération. Il s'agit d'une fonctionnalité qui n'est pas prise en charge dans Vue2 et qui peut aider les développeurs à mieux résoudre les problèmes de rendu des données de liste.

Pour démontrer le fonctionnement de la fonction v-for de Vue3, nous allons créer une application simple qui affiche une série d'affiches de films. Voyons comment implémenter cette application à l'aide de la fonction v-for de Vue3.

Tout d'abord, nous avons besoin d'un fichier JSON pour stocker les données de tous les films. Voici un exemple simple de fichier JSON :

[
  {
    "title": "假如爱有天意",
    "poster": "img/love-in-heaven.jpg",
    "rating": "7.5",
    "genre": ["剧情", "爱情"],
    "director": "付士琪",
    "actors": [{
        "name": "张一山",
        "role": "程皓"
      },
      {
        "name": "关晓彤",
        "role": "钟灵"
      },
      {
        "name": "张睿",
        "role": "方致远"
      }
    ]
  },
  {
    "title": "唐人街探案3",
    "poster": "img/tangren3.jpg",
    "rating": "7.6",
    "genre": ["喜剧", "悬疑"],
    "director": "陈思诚",
    "actors": [{
        "name": "王宝强",
        "role": "唐仁"
      },
      {
        "name": "刘昊然",
        "role": "秦风"
      },
      {
        "name": "妻夫木聪",
        "role": "石江山"
      }
    ]
  }
]

Ce fichier contient un ensemble de données de film, notamment le titre, l'affiche, la note, le genre, le nom du réalisateur, le nom de l'acteur et le rôle. Nous utiliserons ce fichier JSON comme source de données.

Ensuite, nous créerons une instance Vue pour afficher notre liste de films. Nous pouvons utiliser la directive v-for dans le modèle Vue pour parcourir chaque film de la source de données. Nous pouvons inclure l'affiche, le nom et la note de chaque film dans un élément HTML pour afficher les informations sur le film.

<template>
  <div class="movie-list">
    <div v-for="movie in movies" :key="movie.title">
      <img :src="movie.poster" alt="movie poster" />
      <h2>{{movie.title}}</h2>
      <div>评分：{{movie.rating}}</div>
    </div>
  </div>
</template>

<script>
import moviesData from "./movies.json";

export default {
  data() {
    return {
      movies: moviesData,
    };
  },
};
</script>

<style>
.movie-list {
  display: flex;
  flex-wrap: wrap;
}
.movie-list > div {
  width: 200px;
  margin: 10px;
  text-align: center;
}
.movie-list > div img {
  width: 150px;
  height: 200px;
  margin-bottom: 5px;
}
</style>

Dans ce modèle Vue, nous importons d'abord le fichier movies.json, qui est notre source de données. Nous stockons ensuite la liste des films du fichier movies.json dans la propriété movies de l’instance Vue. Ensuite, nous utilisons la directive v-for pour parcourir chaque film et générer un morceau de code HTML pour chaque film afin d'afficher l'affiche, le nom et la note du film.

À ce stade, nous avons créé une application Vue simple pour afficher une liste de films. Nous avons utilisé la directive v-for dans Vue3 pour parcourir un objet et générer un morceau de code HTML pour afficher l'affiche, le nom et la note de chaque film. Nous pouvons également utiliser une fonction v-for personnalisée pour mieux contrôler le processus d'itération et résoudre les problèmes de rendu des données de liste.

En résumé, la fonction v-for dans Vue3 est un outil très puissant et fonctionne très bien dans le rendu des données de liste. Grâce à la fonction v-for de Vue3, les développeurs peuvent contrôler de manière plus flexible le processus d'itération pour répondre à différents types de structures de données. Pour les scénarios où les données sont parcourues dans une application Vue, nous pouvons utiliser la fonction v-for de Vue3 en toute confiance pour des performances optimales et une simplicité de code optimale.

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!