计算属性的复杂操作

计算书的价格并输出

一法：

但是过于繁琐

使用计算属性，for循环计算书的总价

<div id="app">
  <h2>总价格:{{totalPrice}}h2>
div>
 
<script src="../js/vue.js">script>
<script>
  const app=new Vue({
    el:"#app",
    data://注意此处的花括号
        {
          books:[
            {id:110,name:"unix编程艺术",price:53},
            {id:111,name:"深入理解计算机系统",price:85},
            {id:112,name:"编程基础",price:26},
            {id:113,name:"数据结构与设计",price:34},
          ]
        },
    computed:{
      totalPrice:function ()
      {
        let result=0
        for(let i=0;i<this.books.length;i++)
        {
          result+=this.books[i].price
        }
      return result
    }
  }}
  )
script>

 es6的语法

        for(let i in this.books){}
        for(let book of this.books){}