Vue判斷數(shù)組內(nèi)是否存在某一項(xiàng)的兩種方法
Vue判斷數(shù)組內(nèi)是否存在某一項(xiàng)
兩種方法:
findIndex()和 indexOf()方法
findIndex()顧名思義,查找符合條件的值并返回其索引(返回值為-1表示不存在滿足條件的值),通過判斷返回值對(duì)其進(jìn)行下一步操作
indexOf()從頭開始尋找是否存在符合條件的字符串,返回值為-1表示不存在
//方法一:通用
xx(Arr,date){
// 返回值等于-1 說明數(shù)組Arr中不存在id為date的對(duì)象
if( Arr.findIndex(item => item.id=== date )!==-1){
...
}
}
//方法二:當(dāng)數(shù)組里的對(duì)象為字符串時(shí)用這個(gè)方法更簡(jiǎn)單
xx(Arr,date){
// 返回值等于-1 說明數(shù)組Arr中不存在id為date的對(duì)象
if( Arr.indexOf(date)!==-1 ){
...
}
}實(shí)例
xxx(){
const that=this;
that.$axios.get('/get_collection_user') //axios請(qǐng)求
.then((res)=>{
that.cards = res.data //獲取cards數(shù)組
//判斷數(shù)組內(nèi)是否存在數(shù)據(jù)that.storeId,如果不存在返回值為-1
if(that.cards.findIndex(item => item.mindId=== that.storeId)!==-1){
that.isActive = true
}
})VUE-判斷數(shù)組中是否含有某個(gè)值
①findIndex()
['zahngsan','lisi','LIXIUJUAN700','WANGYIBO500'].findIndex((v)=>(v==="LIXIUJUAN700")) // 得到的值!==-1,則存在 // 返回2,該值在數(shù)組中的位置
②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 則存在,返回的是該值在數(shù)組的索引 0④filter()
['nts','stg','esg'].filter((m)=>(m!=='stg'));// ['nts','esg'] // 可以判斷數(shù)組過濾后的長(zhǎng)度與過濾后的長(zhǎng)度比較
⑤includes()
['stg','nts','cds','app'].includes('app');
// true 存在
// false 不存在到此這篇關(guān)于Vue判斷數(shù)組內(nèi)是否存在某一項(xiàng)的文章就介紹到這了,更多相關(guān)Vue判斷數(shù)組內(nèi)是否存在某一項(xiàng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue開發(fā)中的base和publicPath的區(qū)別
本文主要介紹了vue開發(fā)中的base和publicPath的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
vue中用js如何實(shí)現(xiàn)循環(huán)可編輯表格
這篇文章主要介紹了vue中用js如何實(shí)現(xiàn)循環(huán)可編輯表格,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
使用Vue2實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能(可直接使用)
這篇文章主要給大家介紹了如何使用Vue2實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能,文中有相關(guān)的代碼示例,對(duì)我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-08-08
vue-cli項(xiàng)目中遇到的eslint的坑及解決
這篇文章主要介紹了vue-cli項(xiàng)目中遇到的eslint的坑及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
vue-cli3.0 腳手架搭建項(xiàng)目的過程詳解
這篇文章主要介紹了vue-cli3.0 腳手架搭建項(xiàng)目的過程,本文分步驟給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10

