Vue中filter使用及根據(jù)id刪除數(shù)組元素方式
更新時(shí)間：2024年03月08日 11:27:14 作者：小破孩呦
這篇文章主要介紹了Vue中filter使用及根據(jù)id刪除數(shù)組元素方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue使用filter及根據(jù)id刪除數(shù)組元素
先在methods下寫一個(gè)filter過濾的方法
unique(arr) { // 根據(jù)唯一標(biāo)識(shí)orderId來對(duì)數(shù)組進(jìn)行過濾
console.log(arr);
const res = new Map(); //定義常量 res,值為一個(gè)Map對(duì)象實(shí)例
//返回arr數(shù)組過濾后的結(jié)果，結(jié)果為一個(gè)數(shù)組 過濾條件是，如果res中沒有某個(gè)鍵，就設(shè)置這個(gè)鍵的值為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)
首先在這里我們要知道的兩個(gè)基礎(chǔ)知識(shí)
一、filter是一個(gè)過濾器。
二、箭頭函數(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ù)組項(xiàng)，newArr代表得到條件為item.id不等于val的時(shí)候的數(shù)組，相當(dāng)于數(shù)組中刪除了item.id為val的項(xiàng)。
//舉例
//定義一個(gè)數(shù)組，有3條數(shù)據(jù)
list = [
{
id: 1,
name: '吃飯',
done: true
},
{
id: 2,
name: '睡覺',
done: false
},
{
id: 3,
name: '打豆豆',
done: false
}
]
//刪除id為2的數(shù)組項(xiàng)，得到新的數(shù)組
let newArr = this.list.filter(item=>item.id!==2); //[{id: 1,name: '吃飯',done: true},{id: 3,name: '打豆豆',done: false}]總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE table表格動(dòng)態(tài)添加一列數(shù)據(jù),新增的這些數(shù)據(jù)不可以編輯（v-model綁定的數(shù)據(jù)不能實(shí)時(shí)更新）
這篇文章主要介紹了VUE table表格動(dòng)態(tài)添加一列數(shù)據(jù),新增的這些數(shù)據(jù)不可以編輯（v-model綁定的數(shù)據(jù)不能實(shí)時(shí)更新）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2020-04-04
詳解Vue3響應(yīng)式中4個(gè)進(jìn)階API的核心使用場(chǎng)景
這篇文章主要帶大家深入了解一下Vue 3響應(yīng)式系統(tǒng)中那些被低估的進(jìn)階API,例如shallowRef,markRaw等,讓你的應(yīng)用性能瞬間起飛,快跟隨小編一起學(xué)習(xí)一下吧2025-12-12
Vue組件數(shù)據(jù)傳遞與props校驗(yàn)方式
這篇文章主要介紹了Vue組件數(shù)據(jù)傳遞與props校驗(yàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue的全局過濾器和私有過濾器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了vue2.0 路由模式mode="history"的作用，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了滑動(dòng)穿透(鎖body)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在vue3版本中，引入了一個(gè)新的函數(shù)，叫做setup，引入他的原因總結(jié)一下主要原因是：為了使用組合式 API，setup函數(shù)是Composition 的入口。本文將詳細(xì)介紹一下Vue3中setup函數(shù)的使用教程，感興趣的可以了解一下2022-07-07
下面小編就為大家分享一篇elementui的默認(rèn)樣式修改方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助，一起跟隨小編過來看看吧2018-02-02
基于 Vue 的 Electron 項(xiàng)目搭建過程圖文詳解
這篇文章主要介紹了基于 Vue 的 Electron 項(xiàng)目搭建過程，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
關(guān)于axios配置多個(gè)請(qǐng)求地址(打包后可通過配置文件修改)
這篇文章主要介紹了關(guān)于axios配置多個(gè)請(qǐng)求地址(打包后可通過配置文件修改)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09