vue中退出循环的方法
forEach
forEach不能使用break和continue。return也无法退出循环。
使用break,会报错(报错信息:SyntaxError: Illegal break statement)。
使用continue,会报错(报错信息:SyntaxError: Illegal continue statement: no surrounding iteration statement)
使用return,只能跳出本次循环,并不能终止循环。
退出循环的方法:
1. 仍用 forEach:但加上try...catch...
try{ this.userList.forEach( u => { if( u.username === "admin"){ alert("找到admin用户"); throw new Error("已找到,退出循环"); } }) }catch(e){ console.log(e) };
注意:此方法将退出循环,继续执行该函数内 循环后面的代码。
若想直接退出当前函数,catch里必须有return。即try{}catch(){...return}
2. 改用 for循环
for(let i=0;i<this.userList.length;i++){ if( this.userList[i].username === "admin"){ alert("找到admin用户"); break; } }
注意:此方法将退出循环,继续执行该函数内 循环后面的代码。
若想直接退出当前函数,将break改为return。
3. 改用 some( )
this.userList.some( u =>{ if( u.username === "admin"){ alert("找到admin用户"); return true; } })
注意:some只有循环内部return true才会退出循环,继续执行该函数内 循环后面的代码。
4. 改用 every( )
this.userList.every( u =>{ if( u.username === "admin"){ alert("找到admin用户"); return false; }else{ return true; })
注意:every只要循环内部return false就会退出循环,继续执行该函数内 循环后面的代码。
vue中退出循环的方法的更多相关文章
- vue中添加util公共方法&&ES6之import、export
vue中添加util公共方法&&ES6之import.export https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Re ...
- Vue中的循环以及修改差值表达式
0828自我总结 一.Vue中的循环 v-for 常见的4总情况 #第一种 <div v-for="item in items"></div> #第二种 & ...
- vue中mixins的使用方法和注意点(详)
mixins基础概况 vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使 ...
- vue中 localStorage的使用方法(详解)
vue中实现本地储存的方法:localStorage,在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cooki ...
- Vue中导出Excel表格方法
本文记录一下在Vue中实现导出Excel表格的做法.参考度娘上各篇博客,最后实现功能 Excel表格,我的后端返回的是数据流,然后文件名是放进了content-disposition中,前端进行获取. ...
- vue中计算属性computed方法内传参
vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...
- 第七十六篇:ref引用(在vue中引用Dom的方法)
好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...
- 在Vue中关闭Eslint 的方法
在vue项目中关闭ESLint方法:找到 webpack.base.conf.js 将这些代码注释掉, { test: /\.(js|vue)$/, loader: 'eslint-loader', ...
- vue中引入awesomeswiper的方法以及编写轮播组件
1.先安装less-loader npm install less less-loader --save 2.再安装css-loader npm install css-loader --save 3 ...
- vue中动态循环model
vue动态循环model与angular有所不同,angular直接定义一个数组,然后传入循环列表的index即可. 而vue不仅需要定义一个数组,还需要通过接口读出循环的数组长度,然后在create ...
随机推荐
- 系列解读 SMC-R (二):融合 TCP 与 RDMA 的 SMC-R 通信 | 龙蜥技术
简介:本篇以 first contact (通信两端建立首个连接) 场景为例,介绍 SMC-R 通信流程. 文/龙蜥社区高性能网络SIG 一.引言 通过上一篇文章 <系列解读SMC-R:透 ...
- 走近Quick Audience,了解消费者运营产品的发展和演变
简介: Quick Audience产品是一款云原生面向消费者的营销产品,自诞生以来,经历了三个发展阶段.每个阶段的转变,都与互联网环境和消费者行为的变迁有着极大的关联. Quick Audien ...
- Scheduled SQL: SLS 大规模日志上的全局分析与调度
简介: 本文总结了大规模日志全局分析的需求,讨论SLS上现有的典型分析方案,并延伸到 SLS 原生数据处理方案,介绍 Schedueld SQL 功能与最佳实践. 大规模日志全局分析的需求 数据大规模 ...
- [FAQ] CodeMirror5, CodeMirror6 EditorView 获取输入值和设置值的方式
获取值: // CodeMirror5 cm.getValue() 改为使用 // CodeMirror6 cm.state.doc.toString() 设置值: // CodeMirror5 ...
- dotnet C# 推荐一个适合新手入门阅读学习的控制台游戏项目
对于 C# 编程新手,学习语法和框架是必要的,但是如何将它们灵活地运用到实际项目中,是一个更高层次的挑战.如果只是死记硬背语法规则和框架用法,而没有足够的编程实践,很难提高编程水平和逻辑思维.这个时候 ...
- 2019-11-29-WPF-Process.Start-出现-Win32Exception-异常
title author date CreateTime categories WPF Process.Start 出现 Win32Exception 异常 lindexi 2019-11-29 10 ...
- 2018-2-13-win10-uwp-从StorageFile获取文件大小
title author date CreateTime categories win10 uwp 从StorageFile获取文件大小 lindexi 2018-2-13 17:23:3 +0800 ...
- Docker的Portainer认识、安装、使用
一.认识 docker的图形化界面 Portainer 是一个轻量级的容器管理界面,可以让用户更轻松地管理 Docker 容器.镜像.网络和数据卷等.Portainer 提供了一个用户友好的 Web ...
- SQL Server实战五:存储过程与触发器
本文介绍基于Microsoft SQL Server软件,实现数据库存储过程与触发器的创建.执行.修改与删除等操作. 目录 1 交互式创建并执行--存储过程一 2 交互式创建并执行--存储过程二 ...
- gorm 关系一对一,一对多,多对多查询
gorm 关系一对一,一对多,多对多查询 gorm v2版本 Belongs To mysql表 CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_IN ...