什么是计算属性?
计算属性的复杂操作
<div id="app"> <h2>总价格: {{totalPrice}}</h2> <h2>总价格: {{totalPrice}}</h2> <h2>总价格: {{totalPrice}}</h2> <h2>总价格: {{totalPrice}}</h2> <h2>总价格: {{getTotalPrice()}}</h2> <h2>总价格: {{getTotalPrice()}}</h2> <h2>总价格: {{getTotalPrice()}}</h2> <h2>总价格: {{getTotalPrice()}}</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: 105}, {id: 112, name: '深入理解计算机原理', price: 98}, {id: 113, name: '现代操作系统', price: 87}, ] }, methods: { getTotalPrice: function () { let result = 0 for (let i=0; i < this.books.length; i++) { result += this.books[i].price } return result } }, 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) { // // } } } })
计算属性的setter和getter
<div id="app"> <h2>{{fullName}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { firstName: 'Kobe', lastName: 'Bryant' }, computed: { // fullName: function () { // return this.firstName + ' ' + this.lastName // } // name: 'coderwhy' // 计算属性一般是没有set方法, 只读属性. fullName: { set: function(newValue) { // console.log('-----', newValue); const names = newValue.split(' '); this.firstName = names[0]; this.lastName = names[1]; }, get: function () { return this.firstName + ' ' + this.lastName } }, // fullName: function () { // return this.firstName + ' ' + this.lastName // } } }) </script>
有了methods为什么还要有计算属性computed