manlili blog

Vue计算属性

发表于 | 分类于

写一下最近用到的vue计算属性
github地址:https://github.com/manlili/vue_learn里面的lesson06

计算属性定位

当一些数据需要根据其它数据变化时,这时候就需要计算属性

$watch实现计算属性

举个例子

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue计算属性</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            a的值是{{a}}
            b的值是{{b}}
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    a: 1,
                    b: 0
                }
            })
            myVue.$watch("a",function () {
                this.b = this.a+3;
            })
        </script>
    </body>
</html>

正常输出时:a的值是1,b的值为0,但是当在控制台输入:
图
说明b的数据是根据a变化而变化的

computed实现计算属性

上面用$watch可以实现计算属性,但是有点麻烦,首先需要定义b,实例化以后给实例绑定一个$watch方法,下面来看一个更简单的方法实现计算属性

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue计算属性</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            a的值是{{a}}
            b的值是{{b}}
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    a: 1
                },
                computed: {
                    b: function () {
                        return this.a+3;
                    }
                }
            })
        </script>
    </body>
</html>

上面正常的输出是:a的值是1,b的值是4,但是在控制台输入:
图
说明b的数据是根据a变化而变化的

set实现反计算

多数时候a变化,b跟着a变化,但是有时候我们想让b变化时,a跟着b变化,Vue作者给我们提供了set方法来反计算.
举个栗子:(get是b获取值,set是给b赋新值)

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue计算属性</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            a的值是{{a}}
            b的值是{{b}}
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    a: 1
                },
                computed: {
                    b:{
                        get: function () {
                            return this.a+3;
                        },
                        set: function (newValue) {  //参数不能少
                            this.a = newValue-1;   //a的值变化也会导致b变化
                        }
                    }
                }
            })
        </script>
    </body>
</html>

上面正常的输出是:a的值是1,b的值是4,但是在控制台输入:
图

请我喝杯果汁吧！