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判断数组内是否存在某一项内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vscode vue 文件模板的配置方法

    vscode vue 文件模板的配置方法

    这篇文章主要介绍了vscode vue 文件模板的配置方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • Vue编写自定义Plugin详解

    Vue编写自定义Plugin详解

    这篇文章主要介绍了Vue编写自定义Plugin详解,在Vue开发中,我们经常需要使用一些第三方库或功能性模块,Vue插件就是一种将这些库或模块集成到Vue应用中的方式,插件是Vue.js提供的一种机制,用于扩展Vue的功能,需要的朋友可以参考下
    2023-08-08
  • Vue组件数据传递与props校验方式

    Vue组件数据传递与props校验方式

    这篇文章主要介绍了Vue组件数据传递与props校验方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • 在Vue中使用HOC模式的实现

    在Vue中使用HOC模式的实现

    这篇文章主要介绍了在Vue中使用HOC模式的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 如何通过shell脚本自动生成vue文件详解

    如何通过shell脚本自动生成vue文件详解

    这篇文章主要给大家介绍了关于如何通过shell脚本自动生成vue文件的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • vue3 中使用 jsx 开发的详细过程

    vue3 中使用 jsx 开发的详细过程

    这篇文章主要介绍了vue3 中使用 jsx 开发,本文着重说一下在使用 .vue 文件和 .jsx 文件在使用语法上的差异,需要的朋友可以参考下
    2022-09-09
  • vue引入Excel表格插件的方法

    vue引入Excel表格插件的方法

    这篇文章主要为大家详细介绍了vue引入Excel表格插件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • vue+iview 兼容IE11浏览器的实现方法

    vue+iview 兼容IE11浏览器的实现方法

    这篇文章主要介绍了vue+iview 兼容IE11浏览器的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 详解vue中v-for的key唯一性

    详解vue中v-for的key唯一性

    在for循环中生成的元素要加key属性不仅是在Vue框架中是要添加的,在React框架中也是要添加的。但\其实都不是必须的,因为在 Vue和React中不加key是不会报错的,只是会有警告。但是我们在深入了解加key的原因后会明白,若想确保没有隐患的话,元素还是必须要加key属性。
    2021-05-05
  • Vue 中 a标签上href无法跳转的解决方式

    Vue 中 a标签上href无法跳转的解决方式

    今天小编大家分享一篇Vue 中 a标签上href无法跳转的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论