由于 JavaScript 的限制,Vue 不能检测以下数组的变动:
(1)当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
(2)当你修改数组的长度时,例如:vm.items.length = newLength
为了解决第一类问题,我列出了可以响应式更新的方法:
(1)push:在数组后面添加数据
this.list.push("ThinkPHP"); //还可以添加多个 this.list.push("ThinkPHP","node","Typescript");
注:push(...items),可以添加多个
(2)unshift:在数组前面添加数据
this.list.unshift("ThinkPHP");
注:unshift(...items),可以添加多个
(3)pop:删除数组中最后一个元素
this.list.pop();
(4)shift:删除数组中第一个元素
this.list.shift();
(5)splice:删除元素 / 插入元素 / 替换元素
语法结构:splice(start,length,value);
//替换下标0的,数量1个,值是php7.2 this.list.splice(0,1,"PHP7.2"); //删除下标0的,数量1个 this.list.splice(0,1); //新增在下标0的,数量0个,值是PHP7.2 this.list.splice(0,0,"PHP7.2");
注:替换或新增就取决于第二个参数,0新增,1替换;还有第三个value是...item,可以有多个
(6)Vue.set
语法结构:set("要修改的对象",索引值,修改后的值);
//修改对象,下标,修改后的值 Vue.set(this.list,0,"Vue2.0");
原文地址:https://www.cnblogs.com/bushui/p/12210143.html
时间: 2024-11-08 21:30:08