vue官网对于计算属性的描述:
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
当你想要在模板中的多处包含此翻转字符串时,就会更加难以处理。所以,对于任何复杂逻辑,你都应当使用计算属性。
计算属性的使用
当我们有一个数组对象,想要在页面中直接展示数组对象某一个值的总和时,我们可以使用method或者使用计算属性。后续为什么使用计算属性,而不用method后文会提及到的。
页面展示书的总价这里就使用了计算属性,在计算属性中定义一个值,可以在页面中直接使用。
计算属性的getter和setter
了解js的对象的都知道,对象中的值,赋值和取值分别有两个方法:赋值:set,读值:get
完整的计算属性写法:
computed:{
totalPrice:{
get:function(){
const total = this.bookslist.reduce((prev,item) =>{
return item.price + prev;
},0)
return total
},
set:function(){
},
}
}