Vue2 监听属性改变watch

效果：

幼儿园入学年龄（3～6）：  +  -

代码：

<div id="app2">
    <label>幼儿园入学年龄（3～6）：</label><input type="number" v-model="child.age"> <button @click="older"> + </button> <button @click="younger"> - </button>
    <p v-show="hasErr">{{ errMsg }}</p>
</div>
<script>
    var app = new Vue({
        el:"#app2",
        data:{
            child:{age:2},
            hasErr:false,
            errMsg:""
        },
        methods:{
            older:function () {
                this.child.age ++;
            },
            younger:function () {
                this.child.age --;
            },
            hideErr:function () {
                var self = this;
                setTimeout(function () {
                    self.hasErr = false;
                },3000);
            }
        },
        //构造器内的watch
        watch:{
            'child.age':function (newVal,oldVal) {
                if(newVal > 6){
                    this.child.age = 6;
                    this.errMsg = "不得大于6岁";
                    this.hasErr = true;
                    this.hideErr();
                }
            }
        }
    });

    app.$watch("child.age", function (newVal,oldVal) {
        if(newVal < 3){
            app.child.age = 3;
            app.errMsg = "不得小于3岁";
            app.hasErr = true;
            app.hideErr();
        }
    }, {deep:true, immediate:true}); //deep默认true immediate指示是否立即以表达式的当前值触发回调

</script>