Vue不能检测对象属性的添加和删除，要是必须这么做的话

需要使用 vue.$set()

<body>

<div id="app">

    <h3>

        {{user.name}}

        {{user.age}}              <!--this.user.age=20 这个是不会成功的-->

    </h3>

    <button @click="handlerAdd">添加属性</button>

</div>

<script>

    // vue 不能检测对象属性的添加和删除

    // 要用 vue的方法 Vue.set

    let app = new Vue({

        el:'#app',

        data:{

            user:''

        },

        methods:{

          handlerAdd(){

              // vue.$set(object,key,value)

              this.$set(this.user,'age',20)

              // this.user.age=20 这个是不会成功的

          }

        },

        created(){

            setTimeout(()=>{

                this.user={

                    name:'张三'

                }

            },1250)

        }

    })

</script>

</body>

添加多个响应式属性

    <h3>

        {{user.name}}

        {{user.phone}}

        {{user.age}}              <!--this.user.age=20 这个是不会成功的-->

    </h3>
          handlerAdd(){

              // 添加多个响应式

              this.user = Object.assign({},this.user,{

                  age:20,

                  phone:13811091109

              })

          }

vue学习（九）对象变更检测注意事项的更多相关文章

  1. Vue：对象更改检测注意事项

    还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除: var vm = new Vue({ data: { a: 1 } }) // `vm.a` 现在是响应式的 vm.b ...

  2. vue 对象更改检测注意事项

  3. vue学习(九) 使用内联样式设置style样式

    /html <div id="app"> //对象就是无序键值对的集合 <h1 :style="{ color:red, 'font-weight':2 ...

  4. vue学习(十一) v-for使用的注意事项：2.2.0+之后的版本里，当在组件中使用v-for时，key是必须的，它是用来表示唯一身份的

    //html <div id="app"> <div> <label>id <input type="text" v- ...

  5. vue学习之组件

    组件从注册方式分为全局组件和局部组件. 从功能类型又可以分为偏视图表现的(presentational)和偏逻辑的(动态生成dom),推荐在前者中使用模板,在后者中使用 JSX 或渲染函数动态生成组件 ...

  6. vue数组中对象属性变化页面不渲染问题

    问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...

  7. vue中为对象添加值的问题

    demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  9. 深入学习JavaScript对象

    JavaScript中,除了五种原始类型(即数字,字符串,布尔值,null,undefined)之外的都是对象了,所以,不把对象学明白怎么继续往下学习呢? 一.概述 对象是一种复合值,它将很多值(原始 ...

随机推荐

  1. 「译」forEach循环中你不知道的3件事

    前言 本文925字,阅读大约需要7分钟. 总括: forEach循环中你不知道的3件事. 原文地址:3 things you didn't know about the forEach loop in ...

  2. lnmp1.5下安装mongodb

    一.安装mongodb .下载MongoDB 2.6.0二进制发行版 $ curl -O http://downloads.mongodb.org/linux/mongodb-linux-x86_64 ...

  3. JAVA 集合 List 分组的两种方法

    CSDN日报20170219--<程序员的沟通之痛> [技术直播]揭开人工智能神秘的面纱 程序员1月书讯 云端应用征文大赛,秀绝招,赢无人机! JAVA 集合 List 分组的两种方法 2 ...

  4. Redis的增删改查 c# key value类型和hash map 类型

    using Newtonsoft.Json; using StackExchange.Redis; using System; using System.Collections.Generic; us ...

  5. 落谷p1325雷达安装(计算几何)

    传送门 //p1325雷达安装 //很明显雷达应该安装在海岸线上 //而为了满足一个点被覆盖那在区间[x - sqrt(d ^ 2 - y ^ 2), x + sqrt(d ^ 2 - y ^ 2)] ...

  6. python2学习------基础语法5（常用容器以及相关操作）

    1.list(列表) #生成数据list a=[x for x in range(10)]; #print a; #遍历list for i in a: pass; #print i; #追加元素 a ...

  7. echart 库 初始

    一.echart简介 Echarts (http://echarts.baidu.com/)是百度公司出品的,算是百度不可多得的良心之作.要彻底掌握Echarts,你需要掌握一点前端开发的知识,这些知 ...

  8. POJ 3371：Flesch Reading Ease 模拟

    Flesch Reading Ease Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2071   Accepted: 60 ...

  9. oracle 实现主键id自增

    公司现在项目数据库使用oracle,oracle实现表主键自增比mysql麻烦 mysql 在表主键auto_increment 打钩即可.oracle没有改属性,就相对麻烦.特此记录一下自增方法 测 ...

  10. python isdigit()函数

    isdigit() 函数是作用于字符串的,用来判断字符串是否全部由数字组成. x = '123456' y = 'iloveyou123' print(x.isdigit(),y.isdigit()) ...