vuejs实现本地数据的筛选分页功能

效果图：

项目需要：点击左侧进行数据筛选，实现自动分页，自动生成页数，点击自动跳转

项目代码：js代码

下面是html节点代码：

说下思路：首先我们需要本地一组数据，通过vue添加到页面中，第二步我们需要做好分页，那么可以写一个函数对吧，所以有了下面的fenye（命名不规范，大虾勿怪）函数，所谓分页无非就是把一个大数据分成每个小页面去展现，所以我写了一个专门用来展现的数组，也就是yemiandata（同样不规范，我说因为我做的网站内容太多了，所以命名已经用尽了，你们信么），之后我们需要得到多少个页面，并变成一个btn按钮，为了省事，我增加了一个watch：用来监听startnum（开始页数）他变化的话就改变展现。

第三步：分页的话肯定要有上一页下一页，这个就简单多了下一页就是startnum和endnum都增加一，上一页反之。

第四步：也要有点击页数的按钮进行跳转，这个也不难，就是让按钮点下去跳转到指定页，但是去写函数么？不现实对吧，所以我用了一个数组listnum存放多少个按钮，这里解释下为什么不用变量用数组，因为vue中v-for不支持变量循环，所以我改用数组，方便前面html生成节点。

第五步说了需要做筛选，筛选的话就是吧需要展现的素组变成包含制定关键词的，filters函数，利用js的filter和includes进行筛选，做完看看，失败了，出现了很多undefind,为什么？仔细看看没有重置数组，导致第二次筛选是在第一次筛选完的基础筛选。那就重置一下咯，再看看，搞定！

相关推荐：

3.1.3多筛选分页路由

深入理解jQuery layui分页控件的使用

LayUI实现前端分页功能

以上就是vuejs实现本地数据的筛选分页功能的详细内容，更多请关注Gxl网其它相关文章！