这篇文章主要介绍了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对象就是遍历数组
本文来源gaodai^.ma#com搞#代!码网
中的一个元素，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进行遍历，返回一个新的数组实现搜索功能
<div> <label style="float: left"> 搜索关键字： </label> {{slot.row.name}} 表格操作批量删除</div>
6、效果图为
总结
以上所述是小编给大家介绍的Vue中遍历数组的新方法实例详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
以上就是Vue中遍历数组的新方法实例详解的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue中遍历数组的新方法实例详解
转载请注明原文链接：Vue中遍历数组的新方法实例详解
