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中为对象添加值的问题的更多相关文章

  1. vue中,对象数组多层嵌套时,更新数据更新页面

    vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.ti ...

  2. 聊一聊 Vue 中 watch 对象中的回调函数为什么不能是箭头函数?

    聊一聊 Vue 中 watch 对象中的回调函数为什么不能是箭头函数 本文重点知识点速览: Vue 中的 watch 对象中的回调函数不能是箭头函数. 箭头函数中的 this 指向的是函数定义时所在的 ...

  3. 深入理解JavaScript的闭包特性如何给循环中的对象添加事件

    初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...

  4. Vue中改变对象的注意事项

    数组更改注意事项 Vue无法检测到以下方式变动的数组 当你利用索引直接设置一个项时,例如:vm.items[index] = newValue 当你修改数组的长度时,例如:vm.items.lengt ...

  5. EF中修改对象的值的问题。。。(字段超级多的时候)

    一般EF中修改单个对象的值,我是这样处理的. 如:DBEntities db=new DBEntities(); student stu = db.student.firstOrdefault(m=& ...

  6. JavaScript中给对象添加方法

    在JavaScript中,我们经常要给已定义的对象添加一些方法,如下:    function circle(w,h){      this.width=w;      this.height=h; ...

  7. 在CorelDRAW中为对象添加块阴影效果

    我们可以使用CorelDRAW来绘制矢量图形,在勾画出简单的图形后,往往还需要对它们进行一些或简单或复杂的处理,以增加一定的艺术效果.CDR中可供选择的效果有很多,作用的对象可以是文字,也可以是图案. ...

  8. 如何给循环中的对象添加事件--深入理解JavaScript的闭包特性

    初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...

  9. 深入理解JavaScript的闭包特性 如何给循环中的对象添加事件(转载)

    原文参考:http://blog.csdn.net/gaoshanwudi/article/details/7355794 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数 ...

随机推荐

  1. css有缝隙

  2. Redis(三)源source编译

    背景: 自己电脑是win7 32bit的,而想要Redis4.0的版本,但是在网上没找到,所以自己干脆download源source,自己build,安装. 最后,目前达到的状态是,windows下s ...

  3. 前端开发利器: Bootstrap + AngularJS

    http://blog.csdn.net/conquer0715/article/details/51181391 概述 在HTML5盛行的互联网时代,涌现诸多的前端html/css/js框架,基于其 ...

  4. 计算字符串最后一个单词的长度,单词以空格隔开。 java算法

    import java.util.Scanner; public class Main{ public static void main(String[] args){ Scanner in = ne ...

  5. 直面Java 第003期

    . 问:什么是平台无关性,Java是如何做到平台无关的? 解: 大家说的都很对,看来大家对这个概念掌握的很可以.我简单总结一下. 跨平台指的是一种语言在计算机上的运行不受平台的约束,一次编译,到处执行 ...

  6. Cassandra如何保证数据最终一致性

    Cassandra如何保证数据最终一致性:1.逆熵机制(Anti-Entropy)使用默克尔树(Merkle Tree)来确认多个副本数据一致,对于不一致数据,根据时间戳来获取最新数据. 2.读修复机 ...

  7. Running Elixir in Docker Containers

    转自:https://www.poeticoding.com/running-elixir-in-docker-containers/ One of the wonderful things abou ...

  8. Unity Blog 学习

    The Profiler window https://unity3d.com/cn/learn/tutorials/temas/performance-optimization/profiler-w ...

  9. MySQL管理实务处理

    事物处理可以用来维护数据库的完整性,它保证成批的MySQL操作要么完全执行,要么全不执行. 事务:指一组sql语句 回退:指撤销指定的sql语句过程 提交:将未存储的sql语句结果写入数据库表 保留点 ...

  10. openstack--5--控制节点和计算节点安装配置nova

    Nova相关介绍 目前的Nova主要由API,Compute,Conductor,Scheduler组成 Compute:用来交互并管理虚拟机的生命周期: Scheduler:从可用池中根据各种策略选 ...