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组件父与子通信详解(一)

    vue组件父与子通信详解(一)

    这篇文章主要为大家详细介绍了vue组件父与子通信详解,实现登录窗口,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • vue开发中的base和publicPath的区别

    vue开发中的base和publicPath的区别

    本文主要介绍了vue开发中的base和publicPath的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-07-07
  • vue中用js如何实现循环可编辑表格

    vue中用js如何实现循环可编辑表格

    这篇文章主要介绍了vue中用js如何实现循环可编辑表格,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 使用Vue2实现简单的购物车功能(可直接使用)

    使用Vue2实现简单的购物车功能(可直接使用)

    这篇文章主要给大家介绍了如何使用Vue2实现简单的购物车功能,文中有相关的代码示例,对我们的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-08-08
  • 使用vue.js制作分页组件

    使用vue.js制作分页组件

    本文给大家分享的是个人在使用vue.js制作的文章和评论的分页组件,并使用webpack打包起来,这里推荐给大家,有需要的小伙伴可以参考下
    2016-06-06
  • vue-cli项目中遇到的eslint的坑及解决

    vue-cli项目中遇到的eslint的坑及解决

    这篇文章主要介绍了vue-cli项目中遇到的eslint的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue插件实现v-model功能

    vue插件实现v-model功能

    最近在开发自己的富文本编辑器插件,在开发中遇到了很多问题其中我觉得比较好的问题就是在你定义的插件中实现双向绑定。这篇文章主要介绍了vue插件实现v-model功能,需要的朋友可以参考下
    2018-09-09
  • vue 开发企业微信整合案例分析

    vue 开发企业微信整合案例分析

    这篇文章主要介绍了vue 开发企业微信整合,结合具体案例形式分析了vue.js使用企业微信JSSDK实现手机端程序可以和企业微信进行整合功能的相关操作技巧,需要的朋友可以参考下
    2019-12-12
  • vue-cli3.0 脚手架搭建项目的过程详解

    vue-cli3.0 脚手架搭建项目的过程详解

    这篇文章主要介绍了vue-cli3.0 脚手架搭建项目的过程,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10
  • vue 指定文字高亮的实现示例

    vue 指定文字高亮的实现示例

    在做文字处理的项目时经常会遇到搜索文字并高亮的需求,本文就来介绍vue 指定文字高亮的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12

最新评论