良许Linux教程网 干货合集 vue中push()和splice()的使用

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

这篇文章主要介绍了vue中push()和splice()的使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

image-20221115204649232

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

push()使用

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

注意:

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

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

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

数组中添加新元素:

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。

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部
x
x