vue 数组中响应式方法 及 过滤器

• 响应式就是直接在控制台上对数组中的元素进行增删改查时，页面中的展示会跟着变化。

一、push()方法

从最后一位添加元素，可以一次性添加多个值

二、pop()方法

从最后一位删除元素

三、shift()方法

从第一位删除元素

四、unshift()方法

从第一位添加元素,可以一次性传入多个值unshift(…num)

五、splice()方法

splice的作用：
删除：
splice(start,删除的元素个数) ,表示从start开始，要删除多少个元素；
splice(start)表示删除start开始后面的元素
替换：
splice(start,end,替换的元素)表示从start开始删除end个元素，然后再插入替换元素，可以替换多个元素

六、sort()方法

排序

七、reverse()方法

反转

• 过滤器

可以对内容进行修饰
格式：{{原本的内容 | 过滤器}}
例子：想要对价格的显示进行一些修饰，在前面添加￥符号和让它有两位小数显示

html 代码

<div>{{item.price | priceFilter}}</div>

js 代码

filters:{
    priceFilter(price){
        return '￥'+price.toFixed(2)
    }
}

• JavaScript 高阶函数

一、filter

对数组中的数据进行过滤，满足条件的则放到新数组中

const nums=[20,40,80,100,111,212,212]
 //filter
  const newNum1=nums.filter(function (n) {
      return n<100
  })

二、map

对数组中的数据进行处理后放到新数组里面

const nums=[20,40,80,100,111,212,212]
// map
const newNum2=newNum1.map(function (n) {
    return n*2
})

三、reduce

对数组中的数据进行累加

const nums=[20,40,80,100,111,212,212]
// reduce
const newNum3=nums.reduce(function (previousValue,n) {
   return previousValue+n
},0)  //初始值是0