Vue 实用分页paging实例代码

2019-11-19 16:51:22

字体：大中小

来源：转载

供稿：网友

直接上代码。只有一个小小的需要注意的点：vue1.x的v-for循环是从0开始，遵从了程序语言设计的一贯的做法，而vue2.x是从1开始的，符合我们平常的习惯。用下来还是vue2.x的做法方便一些，不需要绕一下子了。

//html<div id="paging"><span v-on:click="switchPage(curPage - 1)">prev</span><span v-for="item in sum" v-bind:class="{'current-page': item == curPage}" v-text="item" v-on:click="switchPage(item)"></span><span v-on:click="switchPage(curPage + 1)">next</span></div>

//jsvar paging = new Vue({ el: '#paging', data: {  sum: 4, //总页数  curPage: 1, //当前页 }, methods: {  getBooks: function(page){   //页面初始化函数  },  switchPage: function(page){   var vm = this;   if(page < 1) {    page = 1;   } else if(page > vm.sum) {    page = vm.sum;   }   vm.getBooks(page);   vm.curPage = page;  }, }})

//cssspan { display: inline-block; margin: 3px; width: 35px; height: 35px; line-height: 35px; text-align: center; color: pink; background: #fff; border-radius: 5px;}span.current-page,span:hover { color: #fff; background: pink;}

效果如下：