vue实现前端分页完整代码

下面是“Vue实现前端分页完整代码”的详细讲解攻略，包括代码示例。

什么是前端分页

前端分页是指在浏览器端进行数据分页处理，采用JavaScript实现。该技术可以减轻服务器的负担，提高网站性能，给用户带来更流畅、更友好的交互体验。

基于Vue的前端分页实现

Vue是一款流行的JavaScript框架，为前端开发提供了快速、简便的构建SPA（单页应用）的方式。下面是基于Vue实现前端分页的完整代码示例：

<div id="app">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in paginatedData" :key="index">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
  <div>
    <button :disabled="currentPage === 1" @click="currentPage--">上一页</button>
    <span>{{ currentPage }}</span>
    <button :disabled="currentPage === totalPages" @click="currentPage++">下一页</button>
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    data: [
      { id: 1, name: 'Alice', age: 18 },
      { id: 2, name: 'Bob', age: 20 },
      { id: 3, name: 'Charlie', age: 25 },
      { id: 4, name: 'David', age: 30 },
      { id: 5, name: 'Eva', age: 35 },
      { id: 6, name: 'Frank', age: 40 },
      { id: 7, name: 'Gina', age: 45 },
      { id: 8, name: 'Harry', age: 50 }
    ],
    itemsPerPage: 3, // 每页显示的数据量
    currentPage: 1 // 当前页码
  },
  computed: {
    // 获取当前页应该显示的数据
    paginatedData () {
      const startIndex = (this.currentPage - 1) * this.itemsPerPage;
      const endIndex = startIndex + this.itemsPerPage;
      return this.data.slice(startIndex, endIndex);
    },
    // 获取总页数
    totalPages () {
      return Math.ceil(this.data.length / this.itemsPerPage);
    }
  }
})

上述代码使用Vue框架实现了前端分页功能。其中，data数组存储了原始数据，itemsPerPage定义了每页显示的数据量，currentPage表示当前页码。通过计算属性paginatedData获取当前页应该显示的数据，通过计算属性totalPages获取总页数。

页面中，使用v-for指令遍历每一页数据，currentPage和totalPages控制页面呈现的页码。点击“上一页”和“下一页”按钮，可以切换到前一页和后一页数据。

示例说明

示例1：基于axios异步获取数据

new Vue({
  el: '#app',
  data () {
    return {
      data: [],
      itemsPerPage: 10,
      currentPage: 1
    }
  },
  mounted () {
    axios.get('/api/data')
      .then(response => {
        this.data = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
  computed: {
    paginatedData () {
      const startIndex = (this.currentPage - 1) * this.itemsPerPage;
      const endIndex = startIndex + this.itemsPerPage;
      return this.data.slice(startIndex, endIndex);
    },
    totalPages () {
      return Math.ceil(this.data.length / this.itemsPerPage);
    }
  }
})

该示例中，使用axios库异步获取数据，然后实现分页展示。其中，mounted生命周期函数在组件挂载时触发，异步获取数据后将其保存到data中。由于数据通常很大，可能需要分页展示，页面中的其它部分可以按照前端分页的方式显示数据。

示例2：通过搜索实现过滤

<div id="app">
  <input type="text" v-model="searchKeyword" placeholder="Search...">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in paginatedData" :key="index">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
  <div>
    <button :disabled="currentPage === 1" @click="currentPage--">上一页</button>
    <span>{{ currentPage }}</span>
    <button :disabled="currentPage === totalPages" @click="currentPage++">下一页</button>
  </div>
</div>

new Vue({
  el: '#app',
  data () {
    return {
      data: [
        { id: 1, name: 'Alice', age: 18 },
        { id: 2, name: 'Bob', age: 20 },
        { id: 3, name: 'Charlie', age: 25 },
        { id: 4, name: 'David', age: 30 },
        { id: 5, name: 'Eva', age: 35 },
        { id: 6, name: 'Frank', age: 40 },
        { id: 7, name: 'Gina', age: 45 },
        { id: 8, name: 'Harry', age: 50 }
      ],
      itemsPerPage: 3,
      currentPage: 1,
      searchKeyword: ''
    }
  },
  computed: {
    // 获取满足搜索条件的数据
    filteredData () {
      const result = this.data.filter(item => {
        return item.name.indexOf(this.searchKeyword) !== -1 ||
          item.age.toString().indexOf(this.searchKeyword) !== -1;
      })
      return result;
    },
    // 获取当前页应该显示的数据
    paginatedData () {
      const startIndex = (this.currentPage - 1) * this.itemsPerPage;
      const endIndex = startIndex + this.itemsPerPage;
      return this.filteredData.slice(startIndex, endIndex);
    },
    // 获取总页数
    totalPages () {
      return Math.ceil(this.filteredData.length / this.itemsPerPage);
    }
  }
})

该示例实现了一个搜索框，可以按照姓名和年龄进行搜索，然后按照前端分页的方式展示搜索结果。通过计算属性filteredData过滤不满足搜索条件的数据，然后在paginatedData中进行分页展示。

以上就是基于Vue实现前端分页完整代码的攻略，希望对你有所帮助。