网站建设资讯

NEWS

网站建设资讯

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


      
      
      
      
      
        
          
        
      
    
    表格操作
    批量删除
  

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。

以上就是如何在Vue中遍历数组,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


网站标题:如何在Vue中遍历数组
标题URL:http://njwzjz.com/article/gsdsep.html

其他资讯