一丶代码实战
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<h2>总价格:{{totalPrice}}</h2>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
books:[
{id: 1001, name: 'Unix编程艺术',price: 119},
{id: 1002, name: '代码大全',price: 105},
{id: 1003, name: '深入理解计算机原理',price: 99},
{id: 1004, name: '现代操作系统',price: 109}
]
},
computed:{
totalPrice(){
let result = 0
for(let i=0;i < this.books.length;i++){
result += this.books[i].price
}
return result
}
}
})
</script>
</body>
</html>
二丶运行结果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/024eca96cd4aad0e8b36d2f37921efb6.png#pic_center)