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 < last_page"表示当前页码小于最大页码时才显示下一页的按钮。

页码的遍历

接下来，我们需要在页面上展示分页的页码列表。根据模板中v-for的实现，我们可以知道v-for="page in pages"中的pages是Vue计算属性（computed）中返回的数组。

这里我们需要计算总共有多少页，以及页码列表中需要展示哪些页码。我们使用Vue计算属性来实现：

computed: {
  pages: function() {
    var pages = [];
    for (var i = this.current_page - this.offset; i <= this.current_page + this.offset; i++) {
      if (i > 0 && i <= this.last_page) {
        pages.push(i);
      }
    }
    return pages;
  }
}

其中，pages是页码列表，current_page是当前页码，last_page是最大页码。offset是偏移量，表示当前页码的左右各展示几个页码。

通过计算，我们得到页码列表中应该展示哪些页码。然后在模板中使用v-for遍历计算得到的页码，将列表展示在页面上。

样式的绑定

为了让当前页码的样式显得与众不同，我们需要在模板中给当前页加上指定的class。在模板中，我们使用v-bind:class来实现这个功能。

<li v-for="page in pages"
    v-bind:class="[ page == current_page ? 'active' : '' ]">
  <a href=""
     @click.prevent="changePage(page)">@{{ page }}</a>
</li>

在这段代码中，v-bind:class绑定了一个数组。数组中有两个元素。第一个是判断当前页码与遍历到的页码是否相等，如果相等，则绑定一个active的class，表示当前页码。如果不相等，则绑定一个空字符串的class。通过这个方式，我们就可以实现给当前页码绑定指定的样式。

点击事件的监听

当用户点击某一页码时，我们需要获取该页码并进行相应的跳转或者数据请求等操作。在Vue中，我们通过@click.prevent来注册点击事件并阻止默认行为。

<a href=""
   @click.prevent="changePage(page)">@{{ page }}</a>

这里的changePage是一个方法，我们在Vue实例中定义这个方法。

methods: {
  changePage: function(page) {
    this.current_page = page;
    this.$emit('page-changed', page);
  }
}

在这个方法中，我们更新当前页码并触发（emit）一个自定义事件page-changedclass liaison : lie le style de la page actuelle (active) via v-bind:class. Commande

@click.prevent : utilisez @click.prevent pour surveiller l'événement de clic du numéro de page de pagination. Balise

{{}} : utilisez la balise {{}} pour afficher les numéros de page de pagination.

Analysons ces points clés un par un.

Contrôle des pages précédentes et suivantes#🎜🎜##🎜🎜#Tout d'abord, nous devons déterminer si la page précédente et la page suivante doivent être affichées en fonction du numéro de page actuel. Selon l'implémentation de v-if dans le template, on peut savoir que v-if="current_page > 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!