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>