Vue判断数组内是否存在某一项的两种方法

 更新时间:2023年07月11日 11:37:05   作者:椿☽  
这篇文章主要介绍了Vue判断数组内是否存在某一项,今天给大家分享两种方法,分别是findIndex()和 indexOf()方法,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下

Vue判断数组内是否存在某一项

两种方法:

findIndex()和 indexOf()方法

findIndex()顾名思义,查找符合条件的值并返回其索引(返回值为-1表示不存在满足条件的值),通过判断返回值对其进行下一步操作

indexOf()从头开始寻找是否存在符合条件的字符串,返回值为-1表示不存在

//方法一:通用
xx(Arr,date){ 
	// 返回值等于-1 说明数组Arr中不存在id为date的对象
	if( Arr.findIndex(item => item.id=== date )!==-1){
	...
	}	
}
//方法二:当数组里的对象为字符串时用这个方法更简单
xx(Arr,date){
	// 返回值等于-1 说明数组Arr中不存在id为date的对象
	if( Arr.indexOf(date)!==-1 ){
	...
	}	
}

实例

xxx(){
      const that=this;
      that.$axios.get('/get_collection_user') //axios请求
        .then((res)=>{
          that.cards = res.data  //获取cards数组
          //判断数组内是否存在数据that.storeId,如果不存在返回值为-1
          if(that.cards.findIndex(item => item.mindId=== that.storeId)!==-1){  
            that.isActive = true
          }
      })

VUE-判断数组中是否含有某个值

①findIndex()

['zahngsan','lisi','LIXIUJUAN700','WANGYIBO500'].findIndex((v)=>(v==="LIXIUJUAN700"))
// 得到的值!==-1,则存在
// 返回2,该值在数组中的位置

②find()

 
let arr =[{name:'ZS'},{name:'WW'},{name:'LS'},{name:'GT'},{name:'JP'},{name:'JP'}];
let obj =arr.find((item)=>{item.name==='JP'});
if(obj){
// 存在,返回obj={name:'JP'}
}else{
// 不存在
}

③indexOf()

['nts','stg','APP'].indexOf('nts')
// === -1 则不存在
// !== -1 则存在,返回的是该值在数组的索引 0

④filter()

 
['nts','stg','esg'].filter((m)=>(m!=='stg'));// ['nts','esg']
// 可以判断数组过滤后的长度与过滤后的长度比较

⑤includes()

['stg','nts','cds','app'].includes('app');
// true      存在
// false  不存在

到此这篇关于Vue判断数组内是否存在某一项的文章就介绍到这了,更多相关Vue判断数组内是否存在某一项内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue中如何给el-table-column添加指定列的点击事件

    vue中如何给el-table-column添加指定列的点击事件

    elementui中提供了点击行处理事件,下面这篇文章主要给大家介绍了关于vue中如何给el-table-column添加指定列的点击事件,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • Vue PC端实现扫码登录功能示例代码

    Vue PC端实现扫码登录功能示例代码

    目前大多数PC端应用都有配套的移动端APP,如微信,淘宝等,通过使用手机APP上的扫一扫功能去扫页面二维码图片进行登录,使得用户登录操作更方便,安全,快捷,这篇文章主要介绍了Vue PC端如何实现扫码登录功能,需要的朋友可以参考下
    2023-01-01
  • vue 粒子特效的示例代码

    vue 粒子特效的示例代码

    本篇文章主要介绍了vue 粒子特效的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue vantUI tab切换时 list组件不触发load事件的问题及解决方法

    vue vantUI tab切换时 list组件不触发load事件的问题及解决方法

    这篇文章主要介绍了vue vantUI tab切换时 list组件不触发load事件的解决办法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • vue ssr服务端渲染(小白解惑)

    vue ssr服务端渲染(小白解惑)

    这篇文章主要介绍了vue ssr服务端渲染(小白解惑),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Vue2中如何使用全局事件总线实现任意组件间通信

    Vue2中如何使用全局事件总线实现任意组件间通信

    全局事件总线就是一种组件间通信的方式,适用于任意组件间通信,下面这篇文章主要给大家介绍了关于Vue2中如何使用全局事件总线实现任意组件间通信的相关资料,需要的朋友可以参考下
    2022-12-12
  • 详解Vue中watch的高级用法

    详解Vue中watch的高级用法

    我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下。
    2018-05-05
  • Vue.js实现移动端短信验证码功能

    Vue.js实现移动端短信验证码功能

    现在的短信验证码一般为4位或6位,则页面中会相应的显示4个或6个文本框.好多网站需求都有此功能,今天小编给大家分享基于vue.js实现移动端短信验证码功能,需要的朋友参考下吧
    2017-03-03
  • Vue 解决父组件跳转子路由后当前导航active样式消失问题

    Vue 解决父组件跳转子路由后当前导航active样式消失问题

    这篇文章主要介绍了Vue 解决父组件跳转子路由后当前导航active样式消失问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue3父子组件传值中props使用细节浅析

    vue3父子组件传值中props使用细节浅析

    这篇文章主要给大家介绍了关于vue3父子组件传值中props使用细节的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03

最新评论