目录
计算属性的使用
在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示。这时就可以通过计算属性的语法显示,计算属性是写在实例的computed选项中的。
如 我们需要将data中的firstName和lastName结合起来显示在html中:
js:
html:
(1)直接通过插值语法显示:
(2)通过计算属性的语法显示:
运行结果:
可见用两种方法的结果都一样,但是第二种使html页面更简便。
看一个比较复杂的例子:求books中price之和,此时用计算属性的方法更为简单
运行结果:
计算属性的setter和getter
每个计算属性都包含一个getter和一个setter
因为计算属性一般是没有set方法的,为只读属性。所以通常简写为:
计算属性和methods方法的对比
用methods方法和计算属性分别将数据渲染三次
页面运行结果:
可以看到,用计算属性的方法和用methods的方法运行的结果一样。
再来看控制台的运行结果:
可以看到,用methods的方法渲染数据,控制台打印了三次,而用计算属性的方法渲染数据,控制台只打印了一次。
总结:用计算属性的方法调用数据,因为存在缓存,所以只调用了一次;而用methods的方法调用数据,不存在数据缓存,所以需要几次就会调用几次。