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. Mac的Terminal中无法使用mvim解决方案

    对于每个人来说,都会有特别喜欢的编辑器.对于很多热爱Unix/Linux的人来说,Vim/vi肯定是很熟悉的“编辑利器”了. 当然,对于Mac用户来说,肯定也不乏对Vim狂热的人.庆幸的是,Vim对M ...

  2. linux修改键盘按键

    我的电脑:Fedora-19 $ uname -a Linux localhost.localdomain 3.11.10-200.fc19.i686 #1 SMP Mon Dec 2 20:48:2 ...

  3. windows10安装.netframework3.5

    先挂载,看看挂载到哪个盘了,假设是I盘 然后按住shift 点鼠标右键,打开powershell,运行下面命令: dism.exe /online /enable-feature /featurena ...

  4. laravel-url去掉public

    把laravel/server.php改名为index.php 并且将public目录下的.htaccess拷贝到Larvael根目下 Ok了 but why? 自己查去吧

  5. C++ Primer Plus 6 笔记(3)

    第5章 1.cout在显示bool值之前将它们转换为int,但cout.setf(ios:: boolalpha)函数调用设置了一个标记,该标记命令cout显示true和false,而不是1和0 2. ...

  6. spring mvc 的@PathVariable对应中文乱码解决办法

    参考:https://www.aliyun.com/jiaocheng/800577.html

  7. sessionManager配置

    在sessionManager配置的时候,有两个属性, 在这个类中,cacheManager是要注入到sessionDao中的,但要求sessionDao实现CacheManagerAware接口 C ...

  8. esxi 版本升级命令

    先把zip文件通过XShell或者WinSCP上传到esxi服务器上面去,然后执行以下命令,完成升级并重启就可以了.

  9. 苹果vs中国竞争者:瘦死的骆驼比马大?

    前不久,苹果调整2019年第一财季的营收指引,预计第一季度毛利率为38%,相关收入大约为55亿美元,全年总体营收约为840亿美元,运营开支约为87亿美元.针对2019年的运营状况,库克亲自给投资者写了 ...

  10. vue 加载静态图片

    <img class="headImg" :src="require('../../assets/uploads/'+headImg)" alt=&quo ...