Vue中filter使用及根據(jù)id刪除數(shù)組元素方式
vue使用filter及根據(jù)id刪除數(shù)組元素
先在methods下寫一個(gè)filter過濾的方法
unique(arr) { // 根據(jù)唯一標(biāo)識orderId來對數(shù)組進(jìn)行過濾 console.log(arr); const res = new Map(); //定義常量 res,值為一個(gè)Map對象實(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ǔ)知識
一、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中對象的賦值Object.assign({}, row)方式
這篇文章主要介紹了vue中對象的賦值Object.assign({}, row)方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03vue?目錄樹的展開與關(guān)閉的實(shí)現(xiàn)
Vue作為一款流行的前端框架,提供了一種數(shù)據(jù)驅(qū)動(dòng)的方式來實(shí)現(xiàn)目錄樹,本文主要介紹了vue?目錄樹的展開與關(guān)閉的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11vue3中的對象時(shí)為proxy對象如何獲取值(兩種方式)
使用vue3.0時(shí),因?yàn)榈讓邮鞘褂胮roxy進(jìn)行代理的所以當(dāng)我們打印一些值得時(shí)候是proxy代理之后的是Proxy<BR>對象,Proxy對象里邊的[[Target]]才是真實(shí)的對象,那么如何獲取這個(gè)值呢,下面下面給大家介紹兩種方式,感興趣的朋友一起看看吧2023-01-01Vue中 v-if 和v-else-if頁面加載出現(xiàn)閃現(xiàn)的問題及解決方法
vue中v-if 和v-else-if在頁面加載的時(shí)候,不滿足條件的標(biāo)簽會加載然后再消失掉,如果要解決這個(gè)問題,下面小編給大家?guī)砹藢?shí)例代碼,需要的朋友參考下吧2018-10-10Ruoyi-Vue處理跨域問題同時(shí)請求多個(gè)域名接口(前端處理方法)
跨域問題一直都是很多人比較困擾的問題,這篇文章主要給大家介紹了關(guān)于Ruoyi-Vue處理跨域問題同時(shí)請求多個(gè)域名接口的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05el-table多選toggleRowSelection不生效解決方案
這篇文章主要給大家介紹了關(guān)于el-table多選toggleRowSelection不生效的解決方案,文中通過圖文以及代碼將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08