【笔记】vue使用input时，在watch中监听对象属性的变化

当input框的v-model绑定的值是对象中的属性时，如何监听其值的变化。

<el-input placeholder="请输入搜索内容" v-model="selectCondition.name" class="input-with-select"></el-input>

方法一：

 watch: {
      "selectCondition.name":{
        handler:function(newVal, oldVal){
            console.log("监听值变化",newVal, oldVal);
        },
      } ,
}

 

方法二：

 "selectCondition.name" :function name(val){
         console("watch",val)
      },

方法三：

watch:{
	selectCondition:{
		handler:function(val){
			console.log(val)
		},
		deep:true
	}
}

deep=true的意思是修改rule中任何一个属性，都会执行handler这个方法，但是这样消耗比较大，如果对象属性嵌套过深不建议这样使用。