Home > Article > Web Front-end > How to implement paging and display of data in Vue

How to implement paging and display of data in Vue

PHPzOriginal: 2023-10-15 17:46:411592browse

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.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Pagination</title>
</head>
<body>
  <div id="app">
    <!-- 数据列表 -->
    <ul>
      <li v-for="item in currentPageData" :key="item.id">{{ item.name }}</li>
    </ul>
    <!-- 分页器 -->
    <div>
      <button @click="prevPage">上一页</button>
      <span>{{ currentPage }}</span>
      <button @click="nextPage">下一页</button>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // 创建Vue实例
    new Vue({
      el: '#app',
      data: {
        currentPage: 1, // 当前页码
        pageSize: 10, // 每页显示的数据条数
        dataList: [], // 数据列表
      },
      computed: {
        // 计算属性，根据当前页码和每页显示的数据条数，计算当前页显示的数据
        currentPageData() {
          const start = (this.currentPage - 1) * this.pageSize;
          const end = start + this.pageSize;
          return this.dataList.slice(start, end);
        },
      },
      methods: {
        // 上一页
        prevPage() {
          if (this.currentPage > 1) {
            this.currentPage--;
          }
        },
        // 下一页
        nextPage() {
          if (this.currentPage < this.totalPages) {
            this.currentPage++;
          }
        },
      },
      created() {
        // ajax请求获取数据
        // 这里使用setTimeout模拟异步请求
        setTimeout(() => {
          this.dataList = [
            { id: 1, name: '数据1' },
            { id: 2, name: '数据2' },
            // ...
            { id: 100, name: '数据100' },
          ];
        }, 1000);
      },
    });
  </script>
</body>
</html>

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.

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).
By calculating attributes, currentPageData is calculated based on currentPage and pageSize, which is the data to be displayed on the current page.
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.
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.
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.
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!

JavaScript npm for 循环事件异步

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to handle asynchronous data update and display in VueNext article：How to handle asynchronous data update and display in Vue

See more

How to implement paging and display of data in Vue

Related articles