vue中push()和splice()的使用解析

更新時(shí)間：2022年09月10日 11:35:41 作者：鐵錘妹妹@

這篇文章主要介紹了vue中push()和splice()的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue push()和splice()的使用解析

push()使用

push() 方法可向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長(zhǎng)度。

注意：

1. 新元素將添加在數(shù)組的末尾。

2.此方法改變數(shù)組的長(zhǎng)度。

數(shù)組中添加新元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
console.log(fruits); 
//["Banana", "Orange", "Apple", "Mango","Kiwi"];

splice()使用

splice() 方法向/從數(shù)組中添加/刪除項(xiàng)目，然后返回被刪除的項(xiàng)目

注意：這種方法會(huì)改變?cè)紨?shù)組

語(yǔ)法：

array.splice(index,len,item1,.....,itemX)

index: 必需，數(shù)組開(kāi)始下標(biāo) （必須是數(shù)字）
len: 替換/刪除的長(zhǎng)度（必須是數(shù)字，但可以是 “0”；如果未規(guī)定此參數(shù)，則刪除從 index 開(kāi)始到原數(shù)組結(jié)尾的所有元素。）
item: 替換的值，刪除操作的話 item為空

說(shuō)明：

如果從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的數(shù)組。

刪除

//刪除起始下標(biāo)為1，長(zhǎng)度為1的一個(gè)值(len設(shè)置1，如果為0，則數(shù)組不變)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,1);
console.log(fruits); 
//["Banana", "Apple", "Mango"];

//刪除起始下標(biāo)為1，長(zhǎng)度為2的一個(gè)值(len設(shè)置2)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,2);
console.log(fruits); 
//["Banana", "Mango"];

替換

//替換起始下標(biāo)為1，長(zhǎng)度為1的一個(gè)值為‘ttt’，len設(shè)置的1

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,1,'ttt');
console.log(fruits); 
//["Banana", 'ttt',"Apple", "Mango"];

//替換起始下標(biāo)為1，長(zhǎng)度為2的兩個(gè)值為‘ttt’，len設(shè)置的1

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,2,'ttt');
console.log(fruits); 
//["Banana", 'ttt', "Mango"];

添加

//在下標(biāo)為1處添加一項(xiàng)’ttt’

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,0,'ttt');
console.log(fruits); 
//["Banana", 'ttt', "Orange", "Apple", "Mango"];

向數(shù)組中間添加元素

var items = ["1", "2", "3", "4"];
items.splice(items.length / 2, 0, "hello");
console.log(items);
// ["1", "2", "hello", "3", "4"]

使用splice()修改數(shù)據(jù),動(dòng)態(tài)渲染dom不更新

當(dāng) Vue.js 用 v-for 正在更新已渲染過(guò)的元素列表時(shí)，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會(huì)移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序，而是簡(jiǎn)單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過(guò)的每個(gè)元素。

為了給 Vue 一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一 key 屬性。理想的 key 值是每項(xiàng)都有的唯一 id。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: