扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇文章给大家分享的是有关如何在Vue中遍历数组,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
创新互联建站专注于双塔网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供双塔营销型网站建设,双塔网站制作、双塔网页设计、双塔网站官网定制、成都微信小程序服务,打造双塔网络公司原创品牌,更为您提供双塔网站排名全网营销落地服务。
1、foreach
foreach循环对不能使用return来停止循环
search(keyword){ var newList = [] this.urls.forEach(item =>{ if(item.name.indexOf(keyword) != -1){ newList.push(item) } }) return newList }
2、filter
item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组
search(keyword){ return this.urls.filter(item =>{ if(item.name.includes(keyword)){ return item } }) }
3、findIndex
返回true后index就可以获取到匹配的元素在进行删除
del(row){ this.$confirm("确定要删除吗?", "删除").then(action=>{ var index = this.urls.findIndex(item =>{ if(item.name == row.name){ return true; } }) this.urls.splice(index, 1) });
4、some
如果匹配成功就return true跳出some的循环
del(row){ this.$confirm("确定要删除吗?", "删除").then(action=>{ this.urls.some((item, i) =>{ if(item.name == row.name){ this.urls.splice(i, 1) return true; } }) }); }
5、上例子,在一个vue的data中存入一个固定的数组,对数组进行遍历,实现搜索功能,删除功能
在el-table中 :data中绑定一个方法,方法中对固定的数组urls进行遍历,返回一个新的数组实现搜索功能
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
以上就是如何在Vue中遍历数组,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流