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


Posted in Javascript onJuly 21, 2019

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

<template>
  <div>
   <label style="float: left;">
   搜索关键字:
   <input type="text" class="form-control" v-model="keyword">
  </label>
    <el-table :data="search(keyword)" size="small" :stripe="true" :border="true" @select="select" @select-all="select">
      <el-table-column type="selection"></el-table-column>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="网站名" prop="name" width="200">
        <template slot-scope="slot">
          <a href="slot.row.url" target="_blank">{{slot.row.name}}</a>
        </template>
      </el-table-column>
      <el-table-column label="网址" prop="url"></el-table-column>
      <el-table-column label="类型" prop="type" width="50"></el-table-column>
      <el-table-column label="国家" prop="country" width="50"></el-table-column>
      <el-table-column label="操作" width="50">
        <template slot-scope="slot">
          <el-button size="mini" type="text" icon="el-icon-delete" @click="del(slot.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-divider content-position="left">表格操作</el-divider>
    <el-button @click="batchDelete" type="danger" icon="el-icon-delete" size="small">批量删除</el-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
    keyword:'',
        selections: [],
        urls: [{
            name: "新浪",
            url: "http://www.sina.com",
            type: "资讯",
            country: "中国"
          },
          {
            name: "腾讯",
            url: "http://www.tencent.com",
            type: "聊天",
            country: "中国"
          },
          {
            name: "谷歌",
            url: "http://www.google.com",
            type: "资讯",
            country: "美国"
          },
          {
            name: "韬睿",
            url: "http://www.51i-star.com",
            type: "教育",
            country: "中国"
          }
        ]
      };
    },
    methods: {
      del(row){
        this.$confirm("确定要删除吗?", "删除").then(action=>{
     /* this.urls.some((item, i) =>{
      if(item.name == row.name){
       this.urls.splice(i, 1)
       return true;
      }
     }) */
     var index = this.urls.findIndex(item =>{
      if(item.name == row.name){
       return true;
      }
     })
     this.urls.splice(index, 1)
        });
      },
      select(selections, row) {
        this.selections = selections;
      },
      batchDelete() {
        this.$confirm("确定要删除吗?", "删除")
          .then(action => {
            for (var i = this.urls.length - 1; i >= 0; i--) {
              for (var j = this.selections.length - 1; j >= 0; j--) {
                if (this.urls[i].name == this.selections[j].name) {
                  this.urls.splice(i, 1);
                  break;
                }
              }
            }
          })
          .catch(error => {
            alert(error);
            this.$message('删除取消');
          });
      },
   search(keyword){
    /* var newList = []
    this.urls.forEach(item =>{
     if(item.name.indexOf(keyword) != -1){
      newList.push(item)
     }
    })
    return newList */
    return this.urls.filter(item =>{
     if(item.name.includes(keyword)){
      return item
     }
    })
   }
    }
  }
</script>
<style>
</style>

6、效果图为

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

总结

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

Javascript 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
canvas绘制的直线动画
Jan 23 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 #Javascript
jquery插件开发模式实例详解
Jul 20 #jQuery
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 #Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 #Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 #Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 #Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 #Javascript
You might like
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
php生出随机字符串
2017/07/06 PHP
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中集合类型(set)学习小结
2015/01/28 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
keras topN显示,自编写代码案例
2020/07/03 Python
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
逻辑链路控制协议
2016/10/01 面试题
娱乐节目策划方案
2014/06/10 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
Golang 字符串的常见操作
2022/04/19 Golang
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS