0
点赞
收藏
分享

微信扫一扫

【vue】计算属性

迪莉娅1979 2022-02-23 阅读 108

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(){
           
        },
    }
  }

计算属性与method方法对比

以刚才的例子为例,在method中封装了相同的方法,进行对比:
在这里插入图片描述

在这里插入图片描述
在页面中调用了相同次数,在计算属性和方法中都进行了log,在控制台里:
在这里插入图片描述
在方法中,调用了几次就log了几次,但是计算属性只执行了一次。原因是:

举报

相关推荐

Vue -- 计算属性

Vue计算属性

Vue的计算属性

【vue】computed计算属性

vue系列=计算属性

Vue计算属性详解

0 条评论