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 相关文章推荐
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 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
开发大型PHP项目的方法
2006/10/09 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python上下文管理器和with块详解
2017/09/09 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
财务人员个人求职信范文
2013/12/04 职场文书
质量标语大全
2014/06/12 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
个人培训总结
2015/03/05 职场文书
立春观后感
2015/06/18 职场文书
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python