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 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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/11/25 PHP
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
给ECShop添加最新评论
2015/01/07 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
php时间函数用法分析
2016/05/28 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
python字典一键多值实例代码分享
2019/06/14 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
大学生两会学习心得体会
2014/03/10 职场文书
个人创业事迹材料
2014/12/30 职场文书
语文教师个人工作总结
2015/02/06 职场文书
现实表现证明材料
2015/06/19 职场文书
聘任书范文大全
2015/09/21 职场文书