vue中为对象添加值的问题
demo：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<div >
<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#对象更改检测注意事项
- 上一篇 »java中的包以及内部类的介绍
- 下一篇 »python字典对象的update，方法