vue中push()和splice()的使用解析
vue push()和splice()的使用解析
push()使用
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
注意:
1. 新元素将添加在数组的末尾。
2.此方法改变数组的长度。
数组中添加新元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
console.log(fruits);
//["Banana", "Orange", "Apple", "Mango","Kiwi"];
splice()使用
splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目
注意:这种方法会改变原始数组
语法:
array.splice(index,len,item1,.....,itemX)
index
: 必需,数组开始下标 (必须是数字)len
: 替换/删除的长度(必须是数字,但可以是 “0”;如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。)item
: 替换的值,删除操作的话 item为空
说明:
如果从 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"]
使用splice()修改数据,动态渲染dom不更新
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341