数组中的响应式方法
push():在数组后加入新数据
pop():删除数组最后一位的元素
shift():删除数组第一位的元素
unshift():在数组最前面添加元素
splice():删除/插入/替换
reverse(): 数组反转
等等…
<script>
export default {
name: 'app',
data() {
return {
fruit: ['苹果','香蕉','菠萝']
}
},
methods: {
function() {
//push:在数组后加入新数据
this.fruit.push('橘子') //运行结果 fruit=['苹果','香蕉','菠萝','橘子']
this.fruit.push('草莓','西瓜') //运行结果 fruit=['苹果','香蕉','菠萝','草莓','西瓜']
//pop:删除数组最后一位的元素
this.fruit.pop() //运行结果 fruit=['苹果','香蕉']
//shift:删除数组第一位的元素
this.fruit.shift() //运行结果 fruit=['香蕉','菠萝']
//unshift:在数组最前面添加元素
this.fruit.unshift('橘子') //运行结果 fruit=['橘子','苹果','香蕉','菠萝']
this.fruit.unshift('草莓','西瓜') //运行结果 fruit=['草莓','西瓜','苹果','香蕉','菠萝']
// splice('','',''...):删除/插入/替换
// 第一个参数:光标位置(从第几个元素开始删除/插入/替换)
// 删除:第二个参数填写删除元素个数,不填删除全部元素;
// 插入:第二个参数为0,后面跟上插入的元素
// 替换:第二个参数填入替换元素的个数,后面跟上替换的元素
this.fruit.splice(1, 2) //运行结果 fruit=['苹果']
this.fruit.splice(1, 0, '橘子', '草莓') //运行结果 fruit=['苹果','橘子','草莓','香蕉','菠萝']
this.fruit.splice(2, 1, '橘子') //运行结果 fruit=['苹果','香蕉','橘子']
//reverse: 数组反转
this.fruit.reverse() //运行结果 fruit=['菠萝','香蕉','苹果']
}
},
}
</script>