Vue计算属性的复杂使用

<!-- ​ 现在有一个数组数据books，里面包含许多book对象
             ​ 要求计算出所有book的总价格totalPrice。 -->

代码如下：

	    <div id="app">
			<h2>总价格:{{totalPrice}}</h2>
		</div>
		
		<script src="../22.5.18/vue.js"></script>
		<script type="text/javascript">
			
			const app = new Vue({
				el:"#app",
				data:{
					books:[
						{id:001,name:"Ui",price:120},
						{id:002,name:"前端",price:150},
						{id:003,name:"后端",price:180}
					]
				},
				computed:{
					//1.for循环
					totalPrice(){
						let result = 0;
						for(let i = 0; i <this.books.length;i++){
							result = result + this.books[i].price;
						}
						return result
					}
					
					//2.for in
					// totalPrice(){
					// 	let result = 0;
					// 	for(let i in this.books){
					// 		result += this.books[i].price
					// 	}
					// 	return result
					// }
					
					//3.for of
					// totalPrice(){
					// 	let result = 0;
					// 	for(let item of this.books){
					// 		result += item.price
					// 	}
					// 	return result
					// }
					
					//4.foreach
					// totalPrice(){
					// 	let total = 0;
					// 	this.books.forEach(item=>{
					// 		total+= item.price
					// 	})	
					// 	return total
					// }
					
					//5.filter
					// totalPrice(){
					// 	let total = 0;
					// 	this.books.filter(item=>{
					// 		total+=item.price
					// 	})
					// 	return total
					// }
					
					//6.map
					// totalPrice(){
					// 	let total = 0;
					// 	this.books.map(item=>{
					// 		total+=item.price
					// 	})
					// 	return total
					// }
					
					//7.reduce
					// totalPrice(){
						// return this.books.reduce(function(total,item){
						// 	return total +item.price
						// },0)
				//简写	   return this.books.reduce((total,item)=>total+item.price,0)
					// }
					
				}
			})
		</script>