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

共计 1701 个字符，预计需要花费 5 分钟才能阅读完成。

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

注意：

1. 新元素将添加在数组的末尾。

2. 此方法改变数组的长度。

数组中添加新元素：

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

splice() 方法向 / 从数组中添加 / 删除项目，然后返回被删除的项目

注意：这种方法会改变原始数组

语法：

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

说明：

如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

// 删除起始下标为 1，长度为 1 的一个值 (len 设置 1，如果为 0，则数组不变)

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

// 删除起始下标为 1，长度为 2 的一个值 (len 设置 2)

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

// 替换起始下标为 1，长度为 1 的一个值为‘ttt’，len 设置的 1

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,1,'ttt');
console.log(fruits); 
//["Banana", 'ttt',"Apple", "Mango"];
// 替换起始下标为 1，长度为 2 的两个值为‘ttt’，len 设置的 1 

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

// 在下标为 1 处添加一项’ttt’

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

向数组中间添加元素

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

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年，有高配

腾讯云新客低至 82 元 / 年，老客户 99 元 / 年

代金券：在阿里云专用满减优惠券