数组中的响应式方法

数组中的响应式方法

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>

标签：香蕉,删除,元素,响应,fruit,数组,橘子,方法
来源： https://blog.csdn.net/weixin_52580677/article/details/122357621