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#對象更改檢測注意事項