上一章讲述了计算属性的基本使用，这里说一下复杂使用
怎么使用计算属性computed：计算出所有books的总价格Price。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>计算属性的复杂使用</title> </head> <body> <div id="app"> <h2>总价格：{{totalPrice}}</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { books: [ { id: 110, name: "JavaScript从入门到入土", price: 119 }, { id: 111, name: "Java从入门到放弃", price: 80 }, { id: 112, name: "编码艺术", price: 99 }, { id: 113, name: "代码大全", price: 150 }, ] }, }) </script> </body> </html>
首先写入
computed: { totalPrice:function() { //写出七种方法 } }
一共有七种求和方法：
第一种：利用for循环遍历
totalPrice:function() { let total = 0; for(let i = 0; i<this.books.length;i++){ total += this.books[i].price; } return total; }
第二种：forEach
totalPrice: function () { let total = 0; this.books.forEach((item) => { total += item.price }) return total; }
第三种：for in
totalPrice: function () { let total = 0; for (let i in this.books){ total += this.books[i].price } return total; }
第四种：for of
totalPrice: function () { let total = 0; for(let value of this.books){ total += value.price } return total }
第五种：map
totalPrice: function () { this.books.map((item)=>{ total += item.price }) return total; }
第六种：filter
totalPrice: function () { let total = 0; this.books.filter((item)=>{ console.log(item); total += item.price }) return total; }
第七种：reduce
totalPrice: function () { return this.books.reduce((currentTotal,item)=>{ console.log(item); return currentTotal + item.price },0) }
简写：
totalPrice: function () { return this.books.reduce((currentTotal,item)=>+item.price) }
下面是完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>计算属性的复杂使用</title> </head> <body> <div id="app"> <h2>总价格：{{totalPrice}}</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { books: [ { id: 110, name: "JavaScript从入门到入土", price: 119 }, { id: 111, name: "Java从入门到放弃", price: 80 }, { id: 112, name: "编码艺术", price: 99 }, { id: 113, name: "代码大全", price: 150 }, ] }, computed: { //1、 for循环第一种方法 totalPrice:function() { let total = 0; for(let i = 0; i<this.books.length;i++){ total += this.books[i].price; } return total; } //2、 forEach /* totalPrice: function () { let total = 0; this.books.forEach((item) => { total += item.price }) return total; } */ //3、 for in /* totalPrice: function () { let total = 0; for (let i in this.books){ total += this.books[i].price } return total; } */ //4、 for of /* totalPrice: function () { let total = 0; for(let value of this.books){ total += value.price } return total } */ //5、 map /* totalPrice: function () { this.books.map((item)=>{ total += item.price }) return total; } */ //6、 filter /* totalPrice: function () { let total = 0; this.books.filter((item)=>{ console.log(item); total += item.price }) return total; } */ //7、 reduce /* totalPrice: function () { return this.books.reduce((currentTotal,item)=>{ console.log(item); return currentTotal + item.price },0) } */ /* totalPrice: function () { return this.books.reduce((currentTotal,item)=>+item.price) } */ } }) </script> </body> </html>
输出的price总和应为：448
