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. java并发初探ConcurrentHashMap

    java并发初探ConcurrentHashMap Doug Lea在java并发上创造了不可磨灭的功劳,ConcurrentHashMap体现这位大师的非凡能力. 1.8中ConcurrentHas ...

  2. 灵光一闪来个科普贴:Linux文件系统

    在计算机系统中,各种需要保存的信息都是以文件的形式存在的.文件管理是对系统信息资源的管理,是操作系统的一项重要功能. 1.文件与文件系统: 1.1文件: 文件是具有名字的一组相关信息的有序集合,存放在 ...

  3. shiro用ajax方式登录

    用了shiro一段时间了,但是有点受不了它请求登录如果验证不通过直接跳的是loginUrl…所以我想很多人想用ajax实现shiro的登录直接在回调函数里面通过js显示出错信息吧. 今天查了一天的资料 ...

  4. 题解 P2801 【教主的魔法】

    分块入门题,不错的,建议大家做一做 开始学习 先看一下数列分块入门 2 这道题想让我们求区间[l,r]>=c的个数,然后我们可以看到"数列分块入门 2"是求区间[l,r]&l ...

  5. Jquery实现列表增删改

    //需求:对列表的增删改  //代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  6. 使用 Helm【转】

    Helm 安装成功后,可执行 helm search 查看当前可安装的 chart. 这个列表很长,这里只截取了一部分.大家不禁会问,这些 chart 都是从哪里来的? 前面说过,Helm 可以像 a ...

  7. NCSC敦促开发者淘汰Python 2

    导读 Python 2.x即将结束生命,英国国家网络安全中心(NCSC)敦促开发人员尽快从Python 2.x迁移到Python 3.x.越快越好.Python 2.x将于2020年1月1日停止使用, ...

  8. 一步步教你整合SSM框架(Spring MVC+Spring+MyBatis)详细教程重要

    前言 SSM(Spring+SpringMVC+Mybatis)是目前较为主流的企业级架构方案,不知道大家有没有留意,在我们看招聘信息的时候,经常会看到这一点,需要具备SSH框架的技能:而且在大部分教 ...

  9. mongodb - 关联字段

    1,博客表结构  Blog.js var mongoose = require('mongoose') mongoose.connect('mongodb://localhost/test',{ us ...

  10. Jdk8中Stream流的使用,让你脱离for循环

    学习要求: 知道一点儿函数式接口和Lambda表达式的基础知识,有利于更好的学习. 1.先体验一下Stream的好处 需求:给你一个ArrayList用来保存学生的成绩,让你打印出其中大于60的成绩. ...