vue.js遍历数组的示例

这篇文章主要介绍vue.js遍历数组的示例，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联专注骨干网络服务器租用10年，服务更有保障！服务器租用，联通机房服务器托管 成都服务器租用，成都服务器托管，骨干网络带宽，享受低延迟，高速访问。灵活、实现低成本的共享或公网数据中心高速带宽的专属高性能服务器。

vue.js遍历数组的方法：1、使用foreach循环，代码为【this.urls.forEach(item =>】；2、使用filter循环，代码为【return this.urls.filter(item =>】。

vue.js遍历数组的方法：

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.js遍历数组的示例”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！