Vue中filter使用及根據(jù)id刪除數(shù)組元素方式
vue使用filter及根據(jù)id刪除數(shù)組元素
先在methods下寫一個filter過濾的方法
unique(arr) { // 根據(jù)唯一標識orderId來對數(shù)組進行過濾
console.log(arr);
const res = new Map(); //定義常量 res,值為一個Map對象實例
//返回arr數(shù)組過濾后的結(jié)果,結(jié)果為一個數(shù)組 過濾條件是,如果res中沒有某個鍵,就設(shè)置這個鍵的值為1
return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
},使用過濾方法
this.list = this.unique(this.list);
根據(jù)id刪除數(shù)組元素
del(id){
//ES6
//根據(jù)id查找元素 findIndex
//let index = arr.findIndex(function(ele,index,arr){return ele.id==id})
//函數(shù)內(nèi)如果返回true,就結(jié)束遍歷并返回當(dāng)前index;
//index如果沒有找到返回-1
let index = this.list.findIndex((ele) =>{
return ele.id === id;
});
//假設(shè)沒有找到
console.log(index);
if(index === -1){
return console.log('刪除失敗');
}
//刪除元素
this.list.splice(index,1);
console.log(this.list)
}vue中filter()函數(shù)的用法
filter函數(shù)基本格式:
let newArr=this.list.filter(item=>item.id!==val)
首先在這里我們要知道的兩個基礎(chǔ)知識
一、filter是一個過濾器。
二、箭頭函數(shù)filter(item=>item.id!==val)相當(dāng)于filter(item){item.code!==val}
其中l(wèi)ist是數(shù)組,this.list.filter()是指在list數(shù)組中,過濾掉item.id!==val條件的數(shù)組項,newArr代表得到條件為item.id不等于val的時候的數(shù)組,相當(dāng)于數(shù)組中刪除了item.id為val的項。
//舉例
//定義一個數(shù)組,有3條數(shù)據(jù)
list = [
{
id: 1,
name: '吃飯',
done: true
},
{
id: 2,
name: '睡覺',
done: false
},
{
id: 3,
name: '打豆豆',
done: false
}
]
//刪除id為2的數(shù)組項,得到新的數(shù)組
let newArr = this.list.filter(item=>item.id!==2); //[{id: 1,name: '吃飯',done: true},{id: 3,name: '打豆豆',done: false}]總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中對象的賦值Object.assign({}, row)方式
這篇文章主要介紹了vue中對象的賦值Object.assign({}, row)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03
Vue中 v-if 和v-else-if頁面加載出現(xiàn)閃現(xiàn)的問題及解決方法
vue中v-if 和v-else-if在頁面加載的時候,不滿足條件的標簽會加載然后再消失掉,如果要解決這個問題,下面小編給大家?guī)砹藢嵗a,需要的朋友參考下吧2018-10-10
Ruoyi-Vue處理跨域問題同時請求多個域名接口(前端處理方法)
跨域問題一直都是很多人比較困擾的問題,這篇文章主要給大家介紹了關(guān)于Ruoyi-Vue處理跨域問題同時請求多個域名接口的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-05-05
el-table多選toggleRowSelection不生效解決方案
這篇文章主要給大家介紹了關(guān)于el-table多選toggleRowSelection不生效的解決方案,文中通過圖文以及代碼將解決辦法介紹的非常詳細,需要的朋友可以參考下2023-08-08

