Vue for循环

1、准备一个数组 数组里面存放一些对象 如下所示

data() {
    return {
      books: [
        {
          id : 0,
          name : "语文",
          count : 1,
          price : 200.00
        },
        {
          id : 1,
          name : "数学",
          count : 1,
          price : 300.00
        },
        {
          id : 2,
          name : "英语",
          count : 1,
          price : 180.00
        },
        {
          id : 3,
          name : "物理",
          count : 1,
          price : 175
        },
        {
          id : 4,
          name : "化学",
          count : 1,
          price : 129
        },
        {
          id : 5,
          name : "生物",
          count : 1,
          price : 129
        }
      ]
    }
  },

第二、循环遍历计算出书的总价
第一种：

let totalprice = 0
    for (let i = 0; i < this.books.length; i++) {
      totalprice += this.books[i].price * this.books[i].count
    }
    console.log(totalprice)
    return  totalprice
  }

第二种：

let totalprice = 0
    for (let i in this.books) {
      totalprice += this.books[i].price * this.books[i].count
    }
    console.log(totalprice)
    return  totalprice

第三种：

let totalprice = 0
    for (let item of this.books) {
      totalprice += item.price * item.count
    }
    console.log(totalprice)
    return  totalprice

第四种：见下面高阶函数 案例三

高阶函数 filter /map/reduce
1、需求一：取出book价格小于200的书籍

//很明显此需求是过虑数据。我们使用for循环也可以满足此需求。但是for循环并不是最优方法
//下面将使用 filter 来解此题。
// filter中的回调函数有一个要求:必须返回一个boolean值
//true;当返回true时，函数内部会自动将这次回调的item加入到新的数组中
// false: 当返回false时， 函数内部会过滤掉这次的item
let newArray = this.books.filter(function (item) {
        return item.price < 200
      })
  console.log(newArray)

2、需求二：将book价格都乘2来销售

let newArray = this.books.map(function(item){
  return  item.price*2
})
console.log(newArray)

3、需求三：

reduce函数的使用
reduce作用对数组中所有的内容进行汇总
let totalprice = this.books.reduce(function (previousValue, item) {
        return previousValue + item.price
      }, 0)
      console.log(totalprice)

写在后面：
v-for页面展示数组元素时加:key 和不加是有区别的
不加key时 diff算法默认会将插入值以及后面的逐一替换
加上key 的目的是给每一个节点做一个唯一标识
Diff算法会正确的识别这个节点 然后找到正确的位置插入节点
总的来说添加key 可以提高虚拟DOM的效率