首页 > 其他分享> > vue_计算属性计算书籍总价格

vue_计算属性计算书籍总价格

2021-10-05 12:34:14 作者：互联网

三种循环方法

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>

标签：vue,name,price,id,Unix,let,计算,编程技术,书籍
来源： https://www.cnblogs.com/zhuhukang/p/15368384.html