Erlo

Vue中遍历数组的新方法

2019-07-20 11:04:07 发布   509 浏览  
页面报错/反馈
收藏 点赞

1、foreach

  foreach循环对不能使用return来停止循环

1 search(keyword){
2         var newList = []
3         this.urls.forEach(item =>{
4           if(item.name.indexOf(keyword) != -1){
5             newList.push(item)
6           }
7         })
8         return newList
9       }

2、filter

  item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组

1 search(keyword){
2         return this.urls.filter(item =>{
3           if(item.name.includes(keyword)){
4             return item
5        }
6    })
7 }

 

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、效果图为

登录查看全部

参与评论

评论留言

还没有评论留言,赶紧来抢楼吧~~

手机查看

返回顶部

给这篇文章打个标签吧~

棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认