概述

通过 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
29
30
31
32
33
34
35
36
37
38
39
40
<div id="app" style="text-align: center">
    <h3>
        计数器:{{counter}}
        <span v-if="seen">（
            修改前值为：<span style="color: blue">{{oldVal}}</span>，
            修改后值为：<span style="color: red">{{newVal}}</span>）
        </span>
    </h3>
    <button v-on:click="addCounter">自加</button>
    <button v-on:click="lessCounter">自减</button>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            counter: 0,
            seen: false,
            oldVal: 0,
            newVal: 0
        },
        methods: {
            addCounter: function () {
                this.counter++;
            },
            lessCounter: function () {
                if (this.counter > 0) {
                    this.counter--;
                }
            }
        },
        watch: {
            //第一个参数是新的值（改变后），第二个是旧的值（改变前）
            counter: function (newValue, oldValue) {
                this.oldVal = oldValue;
                this.newVal = newValue;
                this.seen = true;
            }
        }
    })
</script>

结果

img