本系列博客汇总在这里:Vue.js 汇总


计算属性



源码工程文件为:


一、什么是计算属性?

我们知道,在模板中可以直接通过插值语法显示一些 data 中的数据。但是在某些情况,我们可能需要对数据进行一些化后再显示,或者需要将多个数据结合起来进行显示。比如我们有 firstName 和 lastName 两个变量,我们需要显示完整的名称。但是如果多个地方都需要显示完整的名称,我们就需要写多个 ​​{{firstName}} {{lastName}}​​,这样就会显得比较麻烦。

我们可以将上面的代码换成计算属性:

Vue.js_17_计算属性_工程文件

我们发现计算属性是写在实例的 computed 选项中的。

二、计算属性的复杂操作

计算属性中也可以进行一些更加复杂的操作,比如下面的例子:

Vue.js_17_计算属性_工程文件_02

三、计算属性的 setter 和 getter

使用计算属性的时候,我们一般不使用 setter 方法,默认使用的是 getter 方法(只读)所以上面的就是一种简写方式,如下图我们就可以看出来。

Vue.js_17_计算属性_工程文件_03

每个计算属性都包含一个 getter 和一个 setter。在上面的例子中,我们只是使用 getter 来读取,并且还省略了​​get:function(){}​​。在某些情况下,你也可以提供一个 setter 方法(不常用)。

在需要写 setter 的时候,代码如下:

Vue.js_17_计算属性_vue_04

我们实现以下真正的修改操作。

Vue.js_17_计算属性_数据_05

如有错误,欢迎指正!