Detailed explanation of the implementation process of paging bar component in Vue document

As a popular JavaScript framework, Vue often needs to use the paging function during development. The Vue documentation provides a paging bar component, which provides developers with a convenient and fast way to implement paging. This article will introduce the implementation process of the paging bar component in detail.

First of all, in Vue’s official documentation, we can find the specific implementation of the Pagination component. In the component, first introduce the Vue component and CSS style:

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

In this template, we can see the following key points:

• v-if and v-for instructions: use v-if to control whether the previous page and next page are displayed, and use v-for to traverse the paging page number.
• classBinding: Bind the style of the current page (active) through v-bind:class.
• @click.prevent Command: Use @click.prevent to monitor the click event of the pagination page number.
• {{}} mark: Use the {{}} mark to display the pagination page number.

Let’s analyze these key points one by one.

Control of the previous and next pages

First, we need to determine whether the previous page and the next page need to be displayed based on the current page number. According to the implementation of v-if in the template, we can know that v-if="current_page > 1" means that the button of the previous page will be displayed only when the current page number is greater than 1.

Similarly, v-if="current_page < last_page" means that the next page button will be displayed only when the current page number is less than the maximum page number.

Page number traversal

Next, we need to display the paginated page number list on the page. According to the implementation of v-for in the template, we can know that v-for="page in pages" in pages is in the Vue computed attribute (computed) The returned array.

Here we need to calculate how many pages there are in total, and which page numbers need to be displayed in the page number list. We use Vue calculated properties to achieve this:

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

Among them, pages is the page number list, current_page is the current page number, and last_page is the maximum page number. offset is the offset, indicating how many page numbers are displayed on the left and right of the current page number.

Through calculation, we get which page numbers should be displayed in the page number list. Then use v-for in the template to traverse the calculated page numbers and display the list on the page.

Binding of styles

In order to make the style of the current page number unique, we need to add the specified class to the current page in the template. In the template, we use v-bind:class to achieve this function.

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

In this code, v-bind:class binds an array. There are two elements in the array. The first one is to determine whether the current page number is equal to the traversed page number. If they are equal, bind a active class to represent the current page number. If not equal, bind an empty string class. In this way, we can bind the specified style to the current page number.

Click event monitoring

When the user clicks on a certain page number, we need to obtain the page number and perform corresponding jumps or data requests. In Vue, we use @click.prevent to register the click event and prevent the default behavior.

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

The changePage here is a method, we define this method in the Vue instance.

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

In this method, we update the current page number and trigger (emit) a custom event page-changed. Through this custom event, we can listen to the event in the parent component and implement specific operations.

Summary

Through the above analysis, we can see that the implementation of the Vue paging bar component is relatively simple. But by mastering the underlying principles of this component, we can use the Vue framework more skillfully and apply the paging function more flexibly and conveniently in actual development.

The above is the detailed content of Detailed explanation of the implementation process of paging bar component in Vue document. For more information, please follow other related articles on the PHP Chinese website!