计算属性在Vue中使用得很广泛,是Vue必不可缺少的一部分,我会带大家循序渐进的学习计算属性,首先看个例子。

vue计算属性和方法的区别(Vue学习基础篇)(1)

我们在使用多个data数据是可以这样写,但如果我们需要10个,甚至更多的字段属性进行展示,则需要些更多的拼接,这样html代码则可以太多了,但我们可以想个办法将你需要的字段先拼接好,然后展示到页面上。

首先一个方法,我们可以使用方法method,定义个方法,在方法里进行拼接操作,请看下面的代码。

vue计算属性和方法的区别(Vue学习基础篇)(2)

我们定义个getFullName方法,在Vue内将字段进行操作,可以实现效果,但一般我们使用方法是实现功能的,这里使用方法则不合适,Vue中定义计算属性来实现,请看下面的代码:

vue计算属性和方法的区别(Vue学习基础篇)(3)

计算属性使用 computed关键字,在computed中定义fullName方法,我们返回的时候可以把fullName当做字段属性进行页面的展示。一般情况下使用计算属性更加的规范,而且字段属性加载的时候只会加载一次,而使用method方法则每次都会调用,在性能方面也是使用计算属性更好。

如果我有说的不好的地方,欢迎大家指正!

,