How to implement paging and display of data in Vue

Vue is a popular front-end JavaScript framework that is widely used in web development. Its data-driven and component-based features allow developers to process data and build interactive user interfaces more conveniently.

In actual development, we often encounter situations where a large amount of data needs to be displayed in pages. This article will introduce how to use the Vue framework to implement data paging and display, and give specific code examples.

1. Preparation
First, you need to import the Vue framework into the project. It can be introduced through CDN, or installed using npm, and then imported through the import statement.

  
  



  

    
    

      
{{ item.name }}
    
    
    

      上一页
      {{ currentPage }}
      下一页
    
  

  
  

The above code is an example of the most basic paging function. In the Vue instance, we define some data and methods to control the paging logic.

1. In the data attribute, three variables are defined: currentPage (current page number), pageSize (number of data items displayed on each page) and dataList (data list).
2. By calculating attributes, currentPageData is calculated based on currentPage and pageSize, which is the data to be displayed on the current page.
3. Defines two methods prevPage and nextPage, which are used to jump to the previous page and the next page respectively. Among these two methods, make a judgment first to ensure that the total number of pages is not exceeded.
4. In the created hook function, an asynchronous request is simulated, and the data is saved to the dataList with a delay of 1 second through the setTimeout timer.
5. In the template, use the v-for instruction to loop out the data in currentPageData, and use the v-bind instruction to associate the key attribute.
6. The paginator part implements the "previous page" and "next page" functions through buttons and binding events, and displays the current page number.

The above code only implements basic paging display. Actual projects may require more complex logic, such as jumping to a specified page, displaying the total number of pages, etc. But the basic idea is the same. Based on the current page number and the number of data displayed on each page, the data displayed on the current page is calculated.

The above is the detailed content of How to implement paging and display of data in Vue. For more information, please follow other related articles on the PHP Chinese website!