其他分享
首页 > 其他分享> > 数组中的响应式方法

数组中的响应式方法

作者:互联网

数组中的响应式方法

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