Vue數(shù)組添加元素的三種實(shí)現(xiàn)方式
1、push() 結(jié)尾添加
數(shù)組.push(元素)
var node1 = ['111','222']
var new_node = node1.push('aaa')
此時(shí)數(shù)據(jù)為
node1: ['111','222','aaa']
2、unshift() 頭部添加
數(shù)組.unshift(元素)
var node1 = ['111','222']
var new_node = node1.unshift('aaa')
此時(shí)數(shù)據(jù)為
node1: ['aaa','111','222']
3、splice()
方法向/從數(shù)組指定位置添加/刪除項(xiàng)目,然后返回被刪除的項(xiàng)目。
| 參數(shù) | 描述 |
|---|---|
| index | 必需。整數(shù),規(guī)定添加/刪除項(xiàng)目的位置,使用負(fù)數(shù)可從數(shù)組結(jié)尾處規(guī)定位置。 |
| howmany | 必需。要?jiǎng)h除的項(xiàng)目數(shù)量。如果設(shè)置為 0,則不會(huì)刪除項(xiàng)目。 |
| item1, …, itemX | 可選。向數(shù)組添加的新項(xiàng)目。 |
/**
* Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
* @param start The zero-based location in the array from which to start removing elements.
* @param deleteCount The number of elements to remove.
* @returns An array containing the elements that were deleted.
*/
splice(start: number, deleteCount?: number): T[];
/**
* Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
* @param start The zero-based location in the array from which to start removing elements.
* @param deleteCount The number of elements to remove.
* @param items Elements to insert into the array in place of the deleted elements.
* @returns An array containing the elements that were deleted.
*/
splice(start: number, deleteCount: number, ...items: T[]): T[];
例如:
1、刪除:刪除(任意個(gè)數(shù))
- 參數(shù)1:開始的索引
- 參數(shù)2:刪除的長(zhǎng)度
var node = ['11','22','33','44'] var new_node = node.splice(1,2) //返回被刪除的數(shù)組元素 //new_node 輸出 ['22','33'] console.log(new_node ) //node輸出 ['11','44'] console.log(node)
2、添加(任意個(gè)數(shù)): 插入起始位置、0(要?jiǎng)h除的項(xiàng)數(shù))和要插入的項(xiàng)(不限)
var node = ['11','22','33','44'] //添加splice(start,0,newInfo)--返回值為空數(shù)組 var new_node = node.splice(1,0,'aa','bb') // new_node 輸出 [] console.log(new_node) // node 輸出 ['11', 'aa', 'bb', '22', '33', '44'] console.log(node)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- Vue實(shí)現(xiàn)移除數(shù)組中特定元素的方法小結(jié)
- vue去除數(shù)組指定位置元素的幾種方法
- Vue中filter使用及根據(jù)id刪除數(shù)組元素方式
- vue項(xiàng)目中向數(shù)組添加元素的3種方式
- vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄
- vue.js如何刪除數(shù)組中指定索引的元素
- Vuejs從數(shù)組中刪除元素的示例代碼
- Vue判斷字符串(或數(shù)組)中是否包含某個(gè)元素的多種方法
- vue中實(shí)現(xiàn)監(jiān)聽數(shù)組內(nèi)部元素
相關(guān)文章
從0搭建Vue3組件庫(kù)如何使用?glup?打包組件庫(kù)并實(shí)現(xiàn)按需加載
這篇文章主要介紹了從0搭建Vue3組件庫(kù)如何使用?glup?打包組件庫(kù)并實(shí)現(xiàn)按需加載,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03
?Electron-Vite?+?Vue?3??項(xiàng)目中實(shí)現(xiàn)流暢觸底加載更多功能
本文介紹在Electron-Vite+Vue3項(xiàng)目中實(shí)現(xiàn)觸底加載的兩種方式:原生滾動(dòng)監(jiān)聽和vue-infinite-loading庫(kù),下面給大家分享詳細(xì)實(shí)現(xiàn)步驟,感興趣的朋友一起看看吧2025-07-07
Element-UI結(jié)合遞歸組件實(shí)現(xiàn)后臺(tái)管理系統(tǒng)左側(cè)菜單
在Vue.js中使用遞歸組件可以方便地構(gòu)建多層級(jí)的菜單結(jié)構(gòu),遞歸組件適用于處理具有嵌套關(guān)系的數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-09-09
Vuex unknown action type報(bào)錯(cuò)問題及解決
這篇文章主要介紹了Vuex unknown action type報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02
Vue實(shí)現(xiàn)簡(jiǎn)單基礎(chǔ)的圖片裁剪功能
這篇文章主要為大家詳細(xì)介紹了如何利用Vue2實(shí)現(xiàn)簡(jiǎn)單基礎(chǔ)的圖片裁剪功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下2022-09-09
Vue中使用clipboard實(shí)現(xiàn)復(fù)制功能
這篇文章主要介紹了Vue中結(jié)合clipboard實(shí)現(xiàn)復(fù)制功能 ,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
vue中通過使用$attrs實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞功能
組件之間傳遞數(shù)據(jù)的方式有很多種,之所以有這么多種方式,是為了滿足在不同場(chǎng)景不同條件下的使用。這篇文章主要介紹了vue中通過使用$attrs實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞,需要的朋友可以參考下2019-09-09

