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 相关文章推荐
[原创]用javascript实现检测指定目录是否存在的方法
Jan 12 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
JQuery实现图片轮播效果
May 08 jQuery
layui 表格的属性的显示转换方法
Aug 14 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
express框架下使用session的方法
2019/07/31 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
JS实现简单日历特效
2020/01/03 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
详解node.js 事件循环
2020/07/22 Javascript
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
实用自动化运维Python脚本分享
2018/06/04 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
旷课检讨书范文
2015/01/27 职场文书
党员个人自我评价
2015/03/03 职场文书
小王子读书笔记
2015/06/29 职场文书
Nginx内网单机反向代理的实现
2021/11/07 Servers
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL