Vue 数组相关函数(数组增、删、改)

创建一个数组

  data() {
    return {
      courseList: ['语文','数学','英语','生物','化学','物理'],
    }

1、 push 在数组末尾添加一个或多个元素

//一个
 this.courseList.push('政治')
//多个
 this.courseList.push('政治','地理','历史')

2、pop 删除数组中最后一个元素

 this.courseList.pop()

3、shift 删除数组中第一个元素

 this.courseList.shift()

4、unshift 在数组前面添加一个或多个元素

//一个
this.courseList.unshift('政治')
//多个
 this.courseList.unshift('政治','地理','历史')

5、splice 作用：删除/插入/替换元素
删除元素: 第一个参数是从第几个元素开始删除 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)

this.courseList.splice(2,1)

替换元素:第一个参数是从第几个元素开始替换 第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素

this.courseList.splice(3,3,'政治','地理','历史')

插入元素:第一个参数是从第几个元素插入 第二个参数，传入0，并且后面跟上要插入的元素

this.courseList.splice(2,0,'政治','地理','历史')

6、sort 数组排序

 this.courseList.sort()

7、reverse 数组反转

this.courseList.reverse()

注意:
通过索引值修改数组中的元素 虽然数组中元素改变啦 但是在页面上并没有刷新 因为Vue并不会监听此方式来修改元素所以页面没有响应更新

this.courseList[0] = '体育' ;