vue中數(shù)組加Key方式
vue中數(shù)組加Key
代碼：
const numberList = list.map(item => ({value: item}))其中 list是原數(shù)組，numberList是轉(zhuǎn)化后的數(shù)組，value是key的名稱
在使用element的el-autocomplete遠(yuǎn)程搜索組件時(shí)，普通的數(shù)組不能匹配，需要帶有可以的數(shù)組才可以。
這是普通數(shù)組
轉(zhuǎn)化成key為value的數(shù)組：
vue數(shù)組操作
1、數(shù)組的響應(yīng)式方法
push(value)：從數(shù)組最后面添加元素unshift(value)：從數(shù)組最前面添加元素pop()：從數(shù)組最后一個元素開始刪除shift()：從數(shù)組第一個元素開始刪除splice(start,deleteCount)：從start開始刪除deleteCount個元素splice(start,deleteCount,…value)：從start開始替換deleteCount個元素，后面跟上要替換的元素。splice(start,0,…value)：從start開始插入value,后面跟上要添加的元素。
splice說明：
在進(jìn)行數(shù)組的中間插入操作時(shí)，vue是依次替換每一個數(shù)，然后再在最后添加一個新空間存儲原數(shù)組最后的元素。
這樣做是很沒有效率的，因此在進(jìn)行數(shù)組遍歷時(shí)，若想從中間插入一條數(shù)據(jù)，需要使用到key屬性。
如：
< li v-for=“item in arrays” :key=“item” >{{ item }}所以，一句話概括，key的作用是為了高效的更新虛擬DOM.
2、數(shù)組的非響應(yīng)式方法
arr[0]=“aaa”，列表不會隨著數(shù)組的改變而響應(yīng)式渲染到頁面上。
3、數(shù)組的高階函數(shù)
類似lambda表達(dá)式函數(shù)時(shí)編程：
filter()：過濾數(shù)組，參數(shù)傳遞一個回調(diào)函數(shù)，回調(diào)函數(shù)返回true時(shí)，函數(shù)內(nèi)部自動講這次回調(diào)的數(shù)據(jù)保存到新數(shù)組中；當(dāng)回調(diào)函數(shù)返回false時(shí)，函數(shù)內(nèi)部過濾掉該數(shù)據(jù)。map()：遍歷操作數(shù)組，參數(shù)傳遞一個回調(diào)函數(shù)，可在回調(diào)函數(shù)中操作遍歷的每一個數(shù)組值，如加減乘除。reduce()：對數(shù)組中所有的內(nèi)容進(jìn)行匯總。
案例：
對數(shù)組進(jìn)行操作：
- 1，取出小于100的數(shù)
- 2，每個數(shù)乘2
- 3，匯總
newArray = array.filter(arr => arr < 100).map(arr => arr*2).reduce((arr,num) => arr+num);
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談Vue.set實(shí)際上是什么，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
el-table實(shí)現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換)
這篇文章主要介紹了el-table實(shí)現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換),本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-02-02
Vue中 key keep-alive的實(shí)現(xiàn)原理
這篇文章主要介紹了Vue中 key keep-alive的實(shí)現(xiàn)原理,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
利用vue開發(fā)一個所謂的數(shù)獨(dú)方法實(shí)例
數(shù)獨(dú)是源自18世紀(jì)瑞士的一種數(shù)學(xué)游戲，是一種運(yùn)用紙、筆進(jìn)行演算的邏輯游戲。下面這篇文章主要給大家介紹了關(guān)于利用vue開發(fā)一個所謂的數(shù)獨(dú)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-12-12
使用Vue進(jìn)行數(shù)據(jù)可視化實(shí)踐分享
在當(dāng)今的數(shù)據(jù)驅(qū)動時(shí)代,數(shù)據(jù)可視化變得越來越重要,它能夠幫助我們更直觀地理解數(shù)據(jù),從而做出更好的決策,在這篇博客中,我們將探索如何使用 Vue 和一些常見的圖表庫（如 Chart.js）來制作漂亮的數(shù)據(jù)可視化效果,需要的朋友可以參考下2024-10-10
vue前端獲取/切換麥克風(fēng)、播放采集音頻和采集音量大小完整代碼
這篇文章主要給大家介紹了關(guān)于vue前端獲取/切換麥克風(fēng)、播放采集音頻和采集音量大小的相關(guān)資料,文中通過圖文以及代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12
vue項(xiàng)目實(shí)現(xiàn)點(diǎn)擊目標(biāo)區(qū)域之外可關(guān)閉(隱藏)目標(biāo)區(qū)域
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)點(diǎn)擊目標(biāo)區(qū)域之外可關(guān)閉(隱藏)目標(biāo)區(qū)域，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家介紹了Tree-Shaking?機(jī)制的快速掌握教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
使用live-server快速搭建本地服務(wù)器+自動刷新的方法
下面小編就為大家分享一篇使用live-server快速搭建本地服務(wù)器+自動刷新的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
最近因?yàn)楣卷?xiàng)目問題,開始學(xué)習(xí)vue,這篇文章主要給大家介紹了關(guān)于如何運(yùn)行vue項(xiàng)目的相關(guān)資料,文中還介紹了如何運(yùn)行別人的項(xiàng)目,需要的朋友可以參考下2022-06-06