watch无法直接监听复杂数据类型 要用到deep:true
代码如下:
<div id="app">
<div>
FullName:{{person.fullName}}
</div>
<div>
Firstname:<input type="text" V-model="person.firstName"/>
</div>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el:"#app",
data() {
return {
person:{
firstName:"Meihui",
lastName :"Jin",
fullName :""
}
}
},
watch:{
person:{
handler:function(newval,oldval){
console.log(newval);
console.log(oldval);
this.person.fullName = newval.firstName+this.person.lastName
},
immediate:true,
deep:true
}
}
})