2020-2-1

数组能做到响应式的方法:

  *push():在数组末尾添加元素(可多个)

  *pop():删除数组末尾元素

  *shift():删除数组第一个元素

  *unshift():在数组最前面添加元素(可多个)

  *splice():删除,插入,替换

  *sort():排序

  *reverse():反转

注意: 通过索引值修改数组中的元素 不是响应式的。this.movies[0]=‘海王’ 

  由于vue内部没有监听通过索引值修改数组元素,所以不会刷新页面。

  建议使用splice替换元素。

  或者使用Vue.set(this.movies, 0,‘海王’)  //set(要修改的对象,索引值,修改后的值)

过滤器:

  {{item.price | showPrice}}

  filters: {

    showPrice(price) {

          return ‘$’ + price.toFixed(2)

    }

  }

高阶函数:

  *filter中的回调函数有一个要求:必须返回一个boolean值,对数组中元素进行过滤

      当返回true时,函数内部会自动将这次回调的n加入到新的数组中,

      当返回false时,函数内部会过滤掉这次的n。

      let newNums = nuns.filter(function(n){

            return n < 100

      })

  *map:对数组中元素进行相同操作

        let new2Nums = nuns.map(function(n){

            return n * 2

      })

  *reduce:  对数组中所有元素进行汇总

          let total = nuns.reduce(function(pre, n){

              return pre + n

          }, 0)

链式调用:

    let total = let newNums = nuns.filter(function(n){

            return n < 100

        }).map(function(n){

          return n*2

      }).reduce(function(pre,n){

          return pre + n

      }, 0)

v-model: 表单数据双向绑定

   

推荐阅读更多精彩内容