vue中为对象添加值的问题

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

demo：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<div id="app">
<p>{{obj.name}}----{{obj.age}}--{{obj.height}}</p>
<input type="text" v-model="obj.name">
<input type="text" v-model="obj.age">
<input type="text" v-model="obj.height">
</div>
<script>
new Vue({
el:'#app',
data:{
obj:{name: '123'}
},
created(){

this.obj.name = 'lisi';
this.obj['age']= '12';
this.obj['height']= '170';

//在创建的时候添加属性 age 和 height
//然而你就发现，当你在输入框输入值的时候，只有name是响应更新的，新增加的属性是没有动态更新的
//详见 https://cn.vuejs.org/v2/guide/reactivity.html// 如此，便这么写 ① var temp = {name:'lisi',age: 12,'height':'12'};
// this.obj = Object.assign({},this.obj,temp)// 或者这样 ② var temp = {name:'lisi',age: 12,'height':'12'};
// this.obj = temp;// ③var temp = {name:'lisi',age: 12,'height':'12'};
// for(var key in temp){
// Vue.set(this.obj,key,temp[key]);
// }
// 以上三种方法就可以使属性实时更新了 }

})
</script>
</body>
</html>

数组中也会有类似的问题详见https://cn.vuejs.org/v2/guide/list.html#对象更改检测注意事项