vue之computed计算属性的复杂操作

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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: 110,name: 'Unix编程',price: 119},
                {id: 111,name: '代码大全',price: 120},
                {id: 112,name: '深入理解计算机原理',price: 88},
                {id: 113,name: '现代操作系统',price: 99},
                ]
            },
            computed: {
                totalPrice: function () {
                     let result = 0;
                     for (let i=0;i<this.books.length;i++){
                         result += this.books[i].price
                   }
                   return result

                    // for (let i in this.books) {
                    //   this.books[i]
                    // }
                    //
                    // for (let book of this.books) {
                    //
                    // }
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

本文来自博客园,作者:兮动人,转载请注明原文链接:https://www.cnblogs.com/xdr630/p/15254866.html

原文地址:https://www.cnblogs.com/xdr630/p/15254866.html