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

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

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

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

push()使用

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

注意：

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

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

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

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

splice()使用

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

注意：這種方法會改變原始數(shù)組

語法：

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

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

說明：

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

刪除

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

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

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

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

替換

//替換起始下標(biāo)為1，長度為1的一個值為‘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，長度為2的兩個值為‘ttt’，len設(shè)置的1

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

添加

//在下標(biāo)為1處添加一項’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ù),動態(tài)渲染dom不更新

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

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

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

您可能感興趣的文章: