新增数据
- 在数组尾部添加元素push()
this.list.push('xxx','yyy');
- 在数组头部添加元素unshift
this.list.unshift('111','222');
删除数据
1.删除最后一个元素 pop()
this.list.pop();
2.删除第一个元素 shift()
this.list.shift();
增删改splice()
/*splice(start,length,item)
* start 起始位置
* length 操作数据的长度个数
* item 一个或多个元素
* */
spliceAdd(){
// 在下标为2的位置增加元素['aaa','bbb']
this.list.splice(2, 0, 'aaa','bbb')
},
spliceDel(){
// 从下标为1的位置开始删除2个元素
this.list.splice(1, 2)
},
spliceRep(){
// 从下标为0的位置开始替换2个元素为['DDD',"EEE",'FFF']
this.list.splice(0, 2,'DDD',"EEE",'FFF')
},
排序 sort()
this.list.sort()
颠倒 reverse()
this.list.reverse()
Vue修改 Vue.set
// Vue.set(要修改的对象,索引值,修改后的值)
Vue.set(this.list, 0, 'Vue')
非响应方法
this.list[0] = "数据可修改,但vue不响应";
方法汇总
<script>
const app = new Vue({
el:"#app",
data:{
list:['a','b','c','d']
},
methods:{
// 新增数据项
push(){
this.list.push('xxx','yyy')
},
pop(){
this.list.pop()
},
shift(){
this.list.shift()
},
unshift(){
this.list.unshift('111','222')
},
/*splice(start,length,item)
* start 起始位置
* length 操作数据的长度个数
* item 一个或多个元素
* */
spliceAdd(){
this.list.splice(2, 0, 'aaa','bbb')
},
spliceDel(){
this.list.splice(1, 2)
},
spliceRep(){
this.list.splice(0, 2,'DDD',"EEE",'FFF')
},
sort(){
this.list.sort()
},
reverse(){
this.list.reverse()
},
// Vue.set(要修改的对象,索引值,修改后的值)
set(){
Vue.set(this.list, 0, 'Vue')
},
// 非响应式
modify(){
this.list[0] = "数据可修改,但vue不响应";
console.log(app.list)
},
}
})
</script>