Vue项目中如何利用Axios实现分页数据的请求和展示

npm install axios

import axios from 'axios'

data() {  return {    currentPage: 1, // 当前页码    pageSize: 10, // 每页显示的数量    total: 0, // 数据总条数    dataList: [] // 分页数据列表  }},

created() {  this.getDataList()},

methods: {  getDataList() {    const apiUrl = 'http://example.com/api/dataList' // 请求接口的URL    const params = {       page: this.currentPage,       limit: this.pageSize     } // 请求参数，包括当前页码和每页显示的数量    axios.get(apiUrl, { params })      .then(response => {        this.dataList = response.data.list // 获取返回的数据列表        this.total = response.data.total // 获取返回的数据总条数      })      .catch(error => {        console.log(error)      })  }}

<div v-for="item in dataList" :key="item.id">  <!-- 显示数据的内容 --></div>

computed: {  pageList() {    const pages = Math.ceil(this.total / this.pageSize) // 计算页码总数    const pageList = []        for (let i = 1; i <= pages; i++) {      pageList.push(i) // 将页码加入数组    }        return pageList  }}

<ul class="pagination">  <li v-for="page in pageList" :key="page" :class="{ active: page === currentPage }">    <a @click="setCurrentPage(page)">{{ page }}</a>  </li></ul>

methods: {  // ...  setCurrentPage(page) {    this.currentPage = page    this.getDataList()  }}