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. Linux和云供应商Red Hat被IBM以34亿美元的价格收购

    导读 今天的主题包括IBM以340亿美元收购Red Hat,人性化是使人工智能成功的关键.两家公司于10月28日宣布,IBM正以340亿美元的价格收购Linux和云技术供应商Red Hat,以期改变云 ...

  2. vue移动端transition兼容

    vue移动端transition兼容 .face-recognition .wrapper(:style="{height: viewHeight+'px'}") .face-re ...

  3. Mybatis入门(四)配置优化(一)

    这一章主要实验Mybatis的引入外部配置文件,属性(properties)这个属性都是可外部配置且可动态替换的,既可以在典型的 Java 属性文件中配置,亦可通过 properties 元素的子元素 ...

  4. Django 3.0的新功能

    谷歌翻译的,我修正并且添加了一些内容.凑合看吧. MariaDB的支持 Django现在正式支持MariaDB 10.1和更高版本.有关更多详细信息,请参见MariaDB注释. ASGI支持 Djan ...

  5. NPM概述及使用简介

    什么是 NPM npm之于Node,就像pip之于Python,gem之于Ruby,composer之于PHP. npm是Node官方提供的包管理工具,他已经成了Node包的标准发布平台,用于Node ...

  6. SciPy 图像处理

    章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...

  7. [NOIP 2017 day1]逛公园

    题目描述 策策同学特别喜欢逛公园. 公园可以看成一张 N 个点 M 条边构成的有向图,且没有自环和重边.其中 1 号点是公园的入口, N 号点是公园的出口,每条边有一个非负权值,代表策策经过这条边所要 ...

  8. 清北学堂模拟赛2 T2 ball

    题目大意: 多组数据,每组给定n,m,表示将n个小球放进m个箱子,每个小球均有两个箱子(可能相同)可放,求所有小球均放好的方案mod998244353的总数. 思路: 算是我和题解思路肥肠相近的一道题 ...

  9. Educational Codeforces Round 65 选做

    好久没更博客了,随便水一篇 E. Range Deleting 题意 给你一个长度为 \(n\) 的序列 \(a_1,a_2,\dots a_n\) ,定义 \(f(l,r)\) 为删除 \(l\le ...

  10. 解决oracle 11g 导出空表的方法

    ORACLE 11G中有个新特性,当表无数据时,不分配segment,以节省空间. 解决方法: 1)insert一行,再rollback就产生segment了 该方法是在在空表中插入数据,再删除,则产 ...