Explication détaillée du processus d'implémentation du composant barre de pagination dans le document Vue

Vue, en tant que framework JavaScript populaire, doit souvent utiliser la fonction de pagination pendant le développement. La documentation Vue fournit un composant de barre de pagination, qui offre aux développeurs un moyen pratique et rapide d'implémenter la pagination. Cet article présentera en détail le processus de mise en œuvre du composant barre de pagination.

Tout d’abord, dans la documentation officielle de Vue, on peut retrouver l’implémentation spécifique du composant Pagination. Dans le composant, introduisez d'abord le composant Vue et le style CSS :

<template>
  <nav>
    <ul class="pagination">
      <li v-if="current_page > 1">
        <a href="" aria-label="Previous"
           @click.prevent="changePage(current_page - 1)">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li v-for="page in pages"
          v-bind:class="[ page == current_page ? 'active' : '' ]">
        <a href=""
           @click.prevent="changePage(page)">@{{ page }}</a>
      </li>
      <li v-if="current_page < last_page">
        <a href="" aria-label="Next"
           @click.prevent="changePage(current_page + 1)">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
</template>

<style>
  .pagination li {
    cursor: pointer;
  }
  .pagination li.active span {
    background-color: #3490dc;
    color: #fff;
    border-color: #3490dc;
  }
</style>

Dans ce modèle, nous pouvons voir les points clés suivants :

• v Instructions -if et v-for : utilisez v-if pour contrôler si la page précédente et la page suivante sont affichées, et utilisez v-for Parcourez les numéros de page de pagination.
v-if和v-for指令：通过v-if控制上一页和下一页是否显示，通过v-for遍历分页页码。
• class绑定：通过v-bind:class绑定当前页的样式（active）。
• @click.prevent指令：通过@click.prevent监听分页页码的点击事件。
• {{}}标记：通过{{}}标记来显示分页页码。

下面我们根据这些关键点逐一解析。

前一页和后一页的控制

首先，我们需要根据当前页码数来确定上一页和下一页是否需要显示。根据模板中v-if的实现，我们可以知道v-if="current_page > 1"表示当前页码大于1时才显示上一页的按钮。

同理，v-if="current_page 619eaa0692e7514178ae75df577f680e 1" signifie que le bouton de la page précédente sera affiché uniquement lorsque le numéro de page actuel est supérieur à 1. #🎜🎜##🎜🎜#De même, v-if="current_page < last_page" signifie que le bouton de la page suivante sera affiché uniquement lorsque le numéro de page actuel est inférieur au numéro de page maximum. #🎜🎜##🎜🎜#Parcours des numéros de page#🎜🎜##🎜🎜#Ensuite, nous devons afficher la liste des numéros de page paginés sur la page. D'après l'implémentation de v-for dans le modèle, nous pouvons savoir que pages dans v-for="page in pages" est un Attribut calculé de Vue ( calculé). #🎜🎜##🎜🎜#Ici, nous devons calculer le nombre de pages au total et quels numéros de page doivent être affichés dans la liste des numéros de page. Nous utilisons les propriétés calculées de Vue pour y parvenir : #🎜🎜#rrreee#🎜🎜#Parmi eux, pages est une liste de numéros de page, current_page est le numéro de page actuel, et last_page est le numéro de page maximum. offset est le décalage, indiquant le nombre de numéros de page affichés à gauche et à droite du numéro de page actuel. #🎜🎜##🎜🎜#Grâce au calcul, nous obtenons quels numéros de page doivent être affichés dans la liste des numéros de page. Utilisez ensuite v-for dans le modèle pour parcourir les numéros de page calculés et afficher la liste sur la page. #🎜🎜##🎜🎜#Style contraignant#🎜🎜##🎜🎜#Afin de rendre unique le style du numéro de page actuel, nous devons ajouter la classe spécifiée à la page actuelle dans le modèle. Dans le modèle, nous utilisons v-bind:class pour implémenter cette fonction. #🎜🎜#rrreee#🎜🎜#Dans ce code, v-bind:class lie un tableau. Il y a deux éléments dans le tableau. La première consiste à déterminer si le numéro de page actuel est égal au numéro de page parcouru. S'ils sont égaux, liez une classe active pour représenter le numéro de page actuel. S'il n'est pas égal, liez une classe de chaîne vide. De cette façon, nous pouvons lier le style spécifié au numéro de page actuel. #🎜🎜##🎜🎜#Surveillance des événements de clic#🎜🎜##🎜🎜#Lorsque l'utilisateur clique sur un numéro de page, nous devons obtenir le numéro de page et effectuer les sauts ou requêtes de données correspondants. Dans Vue, nous utilisons @click.prevent pour enregistrer les événements de clic et empêcher le comportement par défaut. #🎜🎜#rrreee#🎜🎜#Le changePage ici est une méthode, nous définissons cette méthode dans l'instance Vue. #🎜🎜#rrreee#🎜🎜#Dans cette méthode, nous mettons à jour le numéro de page actuel et déclenchons (émettons) un événement personnalisé page-changed. Grâce à cet événement personnalisé, nous pouvons écouter l'événement dans le composant parent et implémenter des opérations spécifiques. #🎜🎜##🎜🎜#Résumé#🎜🎜##🎜🎜#Grâce à l'analyse ci-dessus, nous pouvons voir que la mise en œuvre du composant de barre de pagination Vue est relativement simple. Mais en maîtrisant les principes sous-jacents de ce composant, nous pouvons utiliser le framework Vue plus habilement et appliquer la fonction de pagination de manière plus flexible et plus pratique dans le développement réel. #🎜🎜#

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!