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 相关文章推荐
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
小程序实现留言板
Nov 02 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 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中解析带中文字符的url函数分享
2015/01/20 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
React简单介绍
2017/05/24 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
js代码实现轮播图
2020/05/04 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
python获取当前计算机cpu数量的方法
2015/04/18 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
django缓存配置的几种方法详解
2018/07/16 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
软件测试笔试题
2012/10/25 面试题
学校远程教育工作总结
2015/08/11 职场文书
python实现网络五子棋
2021/04/11 Python
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android