vue 实现分页需要哪些参数_基于Vue.js获取后台数据实现分页功能

HTML代码：

class="page-bar"> <ul> <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页a>li> <li v-if="cur==1"><a class="banclick">上一页a>li> <li v-for="index in pages" v-bind:class="{ 'active': cur == index}" :key="index.thumb"> <a v-on:click="btnClick(index)" v-bind:class="{ 'active': index}">{{ index }}a> li> <li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页a>li> <li v-if="cur == all"><a class="banclick">下一页a>li> <li><a>共<i>{{all}}i>页a>li> ul> </div>

CSS样式：

/*分页*/    .page-bar{      margin:40px auto;      margin-left: 445px;      overflow: hidden;      }      li{      list-style: none      }      .page-bar li:first-child>a {      margin-left: 0px      }      .page-bar a{      border: 1px solid #ddd;      text-decoration: none;      position: relative;      float: left;      padding: 6px 12px;      margin-left: -1px;      line-height: 1.42857143;      color: #5D6062;      cursor: pointer;      margin-right: 20px;      }      .page-bar a:hover{      background-color: #eee;      }      .page-bar a.banclick{      cursor:not-allowed;      }      .page-bar .active a{      color: #fff;      cursor: default;      background-color: #E96463;      border-color: #E96463;      }      .page-bar i{      font-style:normal;      color: #d44950;      margin: 0px 4px;      font-size: 12px;    }

JS代码：

mounted() {    this.getList();},data() {    return {        goodsList: [        ],        pageList: [        ],        showList: [        ],        all: "", //总页数        cur: 1,//当前页码        pages: [],        totalPage: 0,//当前条数      }},methods: {          getList() {              this.$http.jsonp("http://localhost/vue/goodsList.php").then(result=>{                  this.goodsList = result.body;                  // 1.将有用的数据放入数组                  this.goodsList.forEach((item) => {                    if (item.category_id == 1 || item.category_id == 2 || item.category_id == 3) {                      this.pageList.push(item);                    }                  });                  // 2.将分页的数组/4                  let pageLength = this.pageList.length; // 数据总长度                  this.all = Math.ceil( pageLength / 4); // 往上取整                  // 3.将页码数显示出来                  for (let i = 1; i <= this.all; i++) {                    this.pages.push(i);                  }                  this.showList = this.pageList.slice(0, 4);              });          },          // 4.裁剪数据函数          slicePageList(cur) {            console.log(this.pageList);            this.showList = this.pageList.slice(((cur - 1) * 4), (cur * 4));          },          // 5.下一页和上一页          pageClick() {            this.slicePageList(this.cur);          },          // 6.鼠标点击页数          btnClick(index) {            this.slicePageList(index);            this.cur = index;            console.log(this.cur);          }        }

-----------------------------效果图-----------------------------------