vue_计算属性计算书籍总价格的三种方式

三种循环方法

  • for( let i=0;i<this.books.length;i++){}
  • for (let i in this.books){}
  • for (let book of this.books){}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-计算属性的复杂操作</title>
</head>
<body>

<div id="app">
  <h2>总价格：{{totalPrice}}</h2>
</div>

<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      books: [
        {id: 0o110, name:'Unix编程技术0', price: 119},
        {id: 0o111, name:'Unix编程技术1', price: 120},
        {id: 0o112, name:'Unix编程技术2', price: 121},
        {id: 0o113, name:'Unix编程技术3', price: 122},
        {id: 0o114, name:'Unix编程技术4', price: 123},
      ]
    },
    computed:{
      totalPrice:function (){
        let result = 0

/* 方法一        
          for (let i=0;i<this.books.length;i++){
            result += this.books[i].price
          }*/
/* 方法二
          for (let i in this.books) {
            result += this.books[i].price
          }*/
// 方法三
        for (let book of this.books) {
          result += book.price
        }
        return result
      }
    }
  })
</script>

</body>
</html>
posted @ 2021-10-05 12:09  博客zhu虎康  阅读(212)  评论(0)  编辑  收藏  举报