vue中computed计算属性的复杂

计算属性复杂使用,其中有三种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>

三种方法

三种

上一篇:基于微信小程序的小说阅读系统设计与实现毕业论文+前后台源码+答辩PPT+运行说明


下一篇:SSM框架整理