如何在Vue中遍历数组

本篇文章给大家分享的是有关如何在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进行遍历，返回一个新的数组实现搜索功能

      
      
      
      
      
        
          
        
      
    
    表格操作
    批量删除