Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第7章 Vue.js高级进阶 7.6 Vue计算属性

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第7章 Vue.js高级进阶

7.6 Vue计算属性

计算属性就是通过其他数据计算出一个新的数据。

计算属性computed，与data，methods平级。

举个栗子：

使用计算属性求一组数字的和。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

运行结果

计算属性声明时是一个方法，并且必须有return返回值。

计算属性调用时不能是方法调用，而是普通的变量调用，直接使用{{getSum}}

在求和的基础上求平均值。

再举个栗子：

输入用户名和密码，改变按钮的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

运行效果