分页功能

最新推荐文章于 2023-04-11 18:12:46 发布

wkeyang

最新推荐文章于 2023-04-11 18:12:46 发布

阅读量141

点赞数

本文链接：https://blog.csdn.net/wkeyang/article/details/100307816

版权

这篇博客介绍了如何在Vue.js中实现分页功能。文章包含了一个分页组件的代码示例，该组件位于`pagination.vue`文件中，并且在`use`页面下有具体的使用方法展示。同时，提到了CSS样式部分采用了Less预处理器。

摘要由CSDN通过智能技术生成

效果图

组件代码：

在pagination下面pagination.vue文件夹里


<template>
  <nav>
    <ul class="pagination">
      <li :class="{'disabled': current == 1}">
        <a @click="setCurrent(current - 1)">«</a>
      </li>
      <li :class="{'disabled': current == 1}">
        <a @click="setCurrent(1)">首页</a>
      </li>
      <li v-for="(p,index) in grouplist" :class="{'active': current == p.val}" :key="index">
        <a @click="setCurrent(p.val)">{
  { p.text }}</a>
      </li>
      <li :class="{'disabled': current == pageSize}&