计算属性复杂使用，其中有三种for循环的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h3>总价格：{{totalPrice}}</h3>
<h1>总价格： {{totalPrice2}}</h1>
<h5>原始计算方法。总价格：{{totalPrice3}}</h5>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books: [
{id:1,price:125,name:'天下无敌'},
{id:1,price:588,name:'红楼梦'},
{id:1,price:65,name:'三国演义'},
{id:1,price:45,name:'金梅'},
{id:1,price:86,name:'水浒传'},
]
},
computed:{
totalPrice(){
let result = 0
for (let i of this.books){
result += i.price
}
return result
},
totalPrice2(){
let result = 0
for (let i in this.books){
result += this.books[i].price
}
return result
},
totalPrice3(){
let result = 0
for (let i=0;i<this.books.length;i++){
result += this.books[i].price
}
return result
}
}
})
</script>
</body>
</html>
三种方法
三种