vuejs实现本地数据的筛选分页功能思路详解(vue.js computed)

编辑：rootadmin

推荐整理分享vuejs实现本地数据的筛选分页功能思路详解(vue.js computed)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue怎么使用本地存储比较好,vue获取本地json数据并展示,vue.js computed,vuejs怎么用,vuejs data,vuejs怎么用,vue获取本地json数据并展示,vue调用本地json,内容如对您有帮助，希望把文章链接给更多的朋友！

今天项目需要一份根据本地数据的筛选分页功能，好吧，本来以为很简单，网上搜了搜全是ajax获取的数据，这不符合要求啊，修改起来太费力气，还不如我自己去写，不多说直接上代码

效果图：

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

项目代码：js代码

下面是html节点代码：

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

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

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

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

总结

以上所述是小编给大家介绍的vuejs实现本地数据的筛选分页功能思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持！

Angular 5.0 来了! 有这些大变化我们很高兴地宣布Angular5.0.0——五角形甜甜圈发布啦！这又是一个主版本，包含新功能并修复了很多bug。它再次体现了我们把Angular做得更小、更快、更

vue.js项目打包上线的图文教程最近一直坚持每个月写一个小的vue.js开发的项目，最后开发完成后想到很久之前给别人回答的一个问题：vue的项目如何上线，当时有千奇百怪的回答，

Vue.js与 ASP.NET Core 服务端渲染功能整合

标签: vue.js computed

本文链接地址:https://www.jiuchutong.com/biancheng/377386.html 转载请保留说明！

上一篇：Vue.js实现列表清单的操作方法(vue list清空)

下一篇：Angular 5.0 来了! 有这些大变化(angular ...)