vue 计算属性的复杂入门到入土computed计算

 1.使用 for 循环

  <div id="app">
        <h2>{{totalPrcie}}</h2>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    books: [{
                        id: 110,
                        name: "JavaScript从入门到入土",
                        price: 119
                    }, {
                        id: 111,
                        name: "Java从入门到放弃",
                        price: 80
                    }, {
                        id: 112,
                        name: "编码艺术",
                        price: 99
                    }, {
                        id: 113,
                        name: "代码大全",
                        price: 150
                    }]
                }
            },
            methods: {

            },

            computed: { //计算属性

                // 1第一种for循环
                totalPrcie() {
                    let total = 0;
                    for (let i = 0; i < this.books.length; i++) {
                        total += this.books[i].price
                    }
                    return total

                }


      </script>

2. 使用for in

   // 2for in 用法
                totalPrcie() {
                    let total = 0;
                    for (let i in this.books) {
                        total += this.books[i].price
                    }
                    return total

                }

3. for  of

                // 3 for of 用法
                totalPrcie() {
                    let total = 0;
                    for (let i of this.books) {
                        total += i.price
                    }
                    return total

                }

4. forEach 

    // 4 forEach 用法
                totalPrcie() {
                    let total = 0;
                    this.books.forEach(item => {
                        total += item.price
                    });
                    return total
                }

5.map

   // 5 map
                totalPrcie() {
                    let total = 0;
                    this.books.map(item => {
                        total += item.price
                    })
                    return total
                }

6.filter

                //6 filter
                totalPrcie() {
                    let total = 0;
                    this.books.filter(item => {
                        total += item.price
                    })
                    return total
                }

7.reduce

     totalPrcie() {
                    return this.books.reduce(function(total, item) {
                        return total + item.price
                    }, 0)
                }

                // 箭头函数写法
                totalPrcie() {
                    return this.books.reduce((total, item) =>
                        total + item.price, 0)
                }
            },