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#对象更改检测注意事项
vue中为对象添加值的问题的更多相关文章
- vue中,对象数组多层嵌套时,更新数据更新页面
vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.ti ...
- 聊一聊 Vue 中 watch 对象中的回调函数为什么不能是箭头函数?
聊一聊 Vue 中 watch 对象中的回调函数为什么不能是箭头函数 本文重点知识点速览: Vue 中的 watch 对象中的回调函数不能是箭头函数. 箭头函数中的 this 指向的是函数定义时所在的 ...
- 深入理解JavaScript的闭包特性如何给循环中的对象添加事件
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
- Vue中改变对象的注意事项
数组更改注意事项 Vue无法检测到以下方式变动的数组 当你利用索引直接设置一个项时,例如:vm.items[index] = newValue 当你修改数组的长度时,例如:vm.items.lengt ...
- EF中修改对象的值的问题。。。(字段超级多的时候)
一般EF中修改单个对象的值,我是这样处理的. 如:DBEntities db=new DBEntities(); student stu = db.student.firstOrdefault(m=& ...
- JavaScript中给对象添加方法
在JavaScript中,我们经常要给已定义的对象添加一些方法,如下: function circle(w,h){ this.width=w; this.height=h; ...
- 在CorelDRAW中为对象添加块阴影效果
我们可以使用CorelDRAW来绘制矢量图形,在勾画出简单的图形后,往往还需要对它们进行一些或简单或复杂的处理,以增加一定的艺术效果.CDR中可供选择的效果有很多,作用的对象可以是文字,也可以是图案. ...
- 如何给循环中的对象添加事件--深入理解JavaScript的闭包特性
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
- 深入理解JavaScript的闭包特性 如何给循环中的对象添加事件(转载)
原文参考:http://blog.csdn.net/gaoshanwudi/article/details/7355794 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数 ...
随机推荐
- DS18B20读数错误排除
描述: 同时测试了好几个板子,都接了DS18B20传感器.但,有的板子读取的DS18B20温度值正确,有的读取错误. 原因查找: 以为是有的传感器坏了,但测试后发现并不是. 又以为是DS18B20需要 ...
- pytorch统计模型参数量
用resnet50 来举例子 print("resnet50 have {} paramerters in total".format(sum(x.numel() for x in ...
- 自定义bootbox:dialog方法
<script src="static/ace/js/bootbox.js"></script>bootbox.dialog({ message: '< ...
- 06 面向对象:多态&抽象类&接口&权限修饰符&内部类
多态: /* 多态(polymorphic)概述 * 事物存在的多种形态 多态前提 * a:要有继承关系. * b:要有方法重写. * c:要有父类引用指向子类对象. * 成员变量 * 编译看左边(父 ...
- hdu2732 Leapin' Lizards 最大流+拆点
Your platoon of wandering lizards has entered a strange room in the labyrinth you are exploring. As ...
- LeetCode - Rectangle Overlap
A rectangle is represented as a list [x1, y1, x2, y2], where (x1, y1) are the coordinates of its bot ...
- 针对IE9的CSS兼容
(自己亲自试过有用)针对IE9的CSS只需在相应CSS代码加入只有IE9识别的 \9\0.具体代码如下: .div{ background-color:#0f0\9\0;/* ie9 */ } 其他浏 ...
- struts2(三)拦截器
拦截器 需求 如果要访问某一个action类中的某一个方法的内容,如果是admin用户,则访问,如果不是admin用户,则不能访问. 实现 缺点 权限判断的代码和业务逻辑代码混合在一起了 利用拦截器 ...
- php 页面调转导致session丢失解决方法
例如在a页面设置了会话,然后打印会话值,可以成功打印,但是调转到b页面后,会话丢失了. 原因有不少,一个原因就是没有在页面开头加入session_start();当然你也可以直接配置php.ini文件 ...
- deno学习四 docker 运行官方的一个http file server
github 上已经有人搞了一个deno 的docker 镜像,是基于源码编译的,挺好的 所以结合官方的http server demo 使用docker 运行 环境准备 docker-compose ...