20.计算属性的基本使用 

<body>
    <div id="app">
        <h1> {{ message + ' ' + add + ' ' + sub }} </h1>
        <!-- 这样写太繁琐了 不方便阅读 -->

        <h1> {{ getMessage() }} </h1>
        <!-- 方法1 调用方法 -->

        <h1> {{ fullName }} </h1>
        <!-- 计算属性基本使用  因为在计算属性computed里面的函数名字 会被解析成属性名  所以用的时候后面不用加() -->

        <h1> 这几本书的总价格是：{{ maxPrice }} </h1>
        <!-- 计算属性复杂使用 -->
    </div>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: "好好学习",
                add: "天天向上",
                sub: "lalalla",
                books: [{ // 当要计算复杂类型的数据是  用计算属性来操作  用数组存储对象
                    id: 100,
                    name: "Unix编程艺术",
                    price: 119
                }, {
                    id: 101,
                    name: "代码大全",
                    price: 102
                }, {
                    id: 102,
                    name: "深入计算机原理",
                    price: 98
                }, {
                    id: 103,
                    name: "现代操作系统",
                    price: 76
                }]
            },
            computed: {
                fullName: function() {
                    return this.message + " " + this.add + " " + this.sub;
                },
                maxPrice: function() { // 计算方法
                    let max = 0;
                    for (let i = 0; i < this.books.length; i++) {
                        max += this.books[i].price;
                    }
                    return max;
                }
            },
            methods: {
                getMessage() { // 用ES6里面的方法
                    return this.message + " " + this.add + " " + this.sub;
                }
            }
        })
    </script>
</body>

 

posted @ 2020-12-29 11:49  闭上耳朵  阅读(226)  评论(0)    收藏  举报