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#对象更改检测注意事项