I do a paged content in Vue, that is, click on different page numbers to show different content, how should I do it?

methods: {

handleCurrentChange(val) {
  console.log(`: ${val}`);
}

}

how should the click event be written, send the id of the click page number to the background, and then get the relevant page number id content to render to the page?

Mar.13,2021

mark


element-ui pagination:
http://element-cn.eleme.io/2.


 <el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page.sync="currentPage"
  :page-size="pageSize"
  layout="total, prev, pager, next"
  :total="1000">
</el-pagination>

handleCurrentChange(val){
    this.currentPage = val
}

the frontend gets the current page number page and the number of pageSize per page is passed to the backend, and the backend calculates Count, based on page and pageSize Then start from the Count data to get the pageSize data and send it to the front end, and the front end displays the list passed from the back end. This is probably the logic of paging. In addition to the list data sent by the backend to the front end, there is also a total, that is, all the numbers, so that the front end can calculate and display the total page

.
Menu