Vue计算属性

1、什么是计算属性

某些情况我们需要对一些数据进行转化后再显示，或者需要将多个数据结合起来进行显示。

2、计算属性的几种写法

    <h2>{{fitstName}} {{lastName}}</h2>
    <h2>{{fitstName + ' '+lastName}}</h2>
    <h2>{{getFullname()}}</h2>
    <h2>{{Fullname}}</h2>
    <h2>总价格：{{totalPrice}}</h2>

3、计算属性的缓存（methods 和 computed）的区别。

computed 方法调用的时候如果数据没有发生变化，只会执行一次函数，methods 方法，每调用一次方法，都会执行一次函数。

*******完整代码******

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<div id="app">
    <h2>{{fitstName}} {{lastName}}</h2>
    <h2>{{fitstName + ' '+lastName}}</h2>
    <h2>{{getFullname()}}</h2>
    <h2>{{Fullname}}</h2>
    <h2>{{Fullname}}</h2>
    <h2>{{Fullname}}</h2>
    <h2>{{Fullname}}</h2>
    <h2>{{getTotalFullname()}}</h2>
    <h2>{{getTotalFullname()}}</h2>
    <h2>{{getTotalFullname()}}</h2>
    <h2>{{getTotalFullname()}}</h2>
    <h2>总价格：{{totalPrice}}</h2>
</div>

<body>
    <script>
        let vm = new Vue({
            el: '#app',
            data: () => ({
                fitstName: 'Lucky',
                lastName: 'Boder',

                books: [
                    { id: 1, bookName: '斗罗大陆', price: 100 },
                    { id: 2, bookName: '武动乾坤', price: 98 },
                    { id: 3, bookName: '凡人修仙传', price: 78 },
                    { id: 4, bookName: '完美世界', price: 105 }
                ]
            }),
            computed: {
                Fullname: function () {
                    console.log('Fullname')
                    return this.fitstName + ' ' + this.lastName
                },
                totalPrice: function () {
                    let result = 0
                    for (let i = 0; i < this.books.length; i++) {
                        result += this.books[i].price
                    }
                    return result
                }
            },
            methods: {
                getFullname: function () {
                    return this.fitstName + ' ' + this.lastName
                },
                getTotalFullname: function () {
                    console.log('getTotalFullname')
                    return this.fitstName + ' ' + this.lastName
                }
            }
        })
    </script>
</body>

</html>

 

posted @ 2019-10-19 17:33  个人升级打怪  阅读(355)  评论(0)  编辑  收藏  举报