Vue中遍历数组的新方法实例详解

前端  /  管理员 发布于 4年前   521

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进行遍历，返回一个新的数组实现搜索功能

6、效果图为

总结

以上所述是小编给大家介绍的Vue中遍历数组的新方法实例详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

• 实例分析vue循环列表动态数据的处理方法
• vue的for循环使用方法
• vue v-for直接循环数字实例
• 浅析vue中常见循环遍历指令的使用 v-for
• vue改变循环遍历后的数据实例