vue教程-侦听对象属性(监听对象属性)、侦听器(监听器)(watch)

说明

当数据是 {} 对象,侦听 {} 对象中的 属性

代码

页面

<el-form-item label="出生日期:" prop="birthday">
    <el-date-picker v-model="ruleForm.birthday" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>

数据:

data:function(){
    return  {
        ruleForm:{
            username:"李雷",
            sex:"1", // 默认不勾选,值应该是 空字符串 或 undefined
            native:"jl",
            desc:"来长春上大学",
            age:0,
            birthday:"2000-05-20",
            phone:"13712345678",
            address:'吉林长春净月区水利水电学院',
        }
    }
},

侦听对象的属性

当侦听对象的属性时,要写 '对象名.属性名',属性名通过 . 与对象分割,并通过 '' 包裹,可以监听对象的某一个属性

侦听 ruleForm 对象 的 birthday 属性,如下:

watch:{
    /*
     * 'ruleForm.birthday'
     * newValue:修改之后的值
     * oldValue:修改之前的值
     */
    'ruleForm.birthday':function(newValue,oldValue){
//              newValue
            console.log(newValue,oldValue)


    }
}

原文出处:/show_1IX6oUM9Dn0F.html