vue学习（九）对象变更检测注意事项
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学习（九）对象变更检测注意事项的更多相关文章
- Vue：对象更改检测注意事项
还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除: var vm = new Vue({ data: { a: 1 } }) // `vm.a` 现在是响应式的 vm.b ...
- vue 对象更改检测注意事项
- vue学习(九) 使用内联样式设置style样式
/html <div id="app"> //对象就是无序键值对的集合 <h1 :style="{ color:red, 'font-weight':2 ...
- vue学习(十一) v-for使用的注意事项：2.2.0+之后的版本里，当在组件中使用v-for时，key是必须的，它是用来表示唯一身份的
//html <div id="app"> <div> <label>id <input type="text" v- ...
- vue学习之组件
组件从注册方式分为全局组件和局部组件. 从功能类型又可以分为偏视图表现的(presentational)和偏逻辑的(动态生成dom),推荐在前者中使用模板,在后者中使用 JSX 或渲染函数动态生成组件 ...
- vue数组中对象属性变化页面不渲染问题
问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...
- vue中为对象添加值的问题
demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- 深入学习JavaScript对象
JavaScript中,除了五种原始类型(即数字,字符串,布尔值,null,undefined)之外的都是对象了,所以,不把对象学明白怎么继续往下学习呢? 一.概述 对象是一种复合值,它将很多值(原始 ...
随机推荐
- routes 学习
对于routes的学习,感觉还是看官方文档理解的比较快,主要说明connect和resource Setting up routes¶ It is assumed that you are using ...
- java基础面试题(转)
这里收集了一些java 面试题的链接: http://blog.csdn.net/jackfrued/article/details/44921941 原文来自:http://www.cnblogs. ...
- Day2-H-非常可乐-HDU1495
大家一定觉的运动以后喝可乐是一件很惬意的事情,但是seeyou却不这么认为.因为每次当seeyou买了可乐以后,阿牛就要求和seeyou一起分享这一瓶可乐,而且一定要喝的和seeyou一样多.但see ...
- IOS UIKIT_EXTERN, __attribute__((visibility ("default"))) 是啥玩意？
问题提出 在学习IOS时候,碰到一个函数NSStringFromCGPoint (UIGeometry.h) 其原型是 UIKIT_EXTERN NSString *NSStringFromCGPoi ...
- i春秋-密码-IceCTF-Alien Message
题目: 对应的解题图片: 解的时候,符号大点的是大写,小点的是小写. IceCTF{gOOd_n3wZ_3vERyoN3_1_L1k3_fU7ur4Ma_4nd_tH3iR_4maZ1nG_3As7e ...
- HTML学习第七天（一）
HTML学习第七天(一) aside元素用来表示当前或文章的附属信息部分,它可以包含与当前页面或主要内容的相关引用.侧边栏.广告.导航条,以及其他类似的有区别于主要内容的部分 <!DOCTYPE ...
- 搭建python的开发环境（采用eclipse的开发工具）在线和离线安装pyDev
一.首先下载python的开发环境并安装 在这里下载python3.7.2,然后安装在一个指定文件夹,随后,将安装路径配置到环境变量中 验证是否成功 OK! 二.在线安装pyDev工具 三.导入开发环 ...
- 空中网4k/5k月薪挑选大四实习生的线程题
空中网4k/5k月薪挑选大四实习生的线程题 两年前,我们一个大四的学员去应聘空中网的实习生职位,空中网只给他出了三道线程题,拿回家做两天后再去给经理讲解,如果前两题做好了给4k月薪,第三道题也做出来的 ...
- RAM和ROM的区别
区别如下: 1.概念 RAM(random access memory)即随机存储内存,这种存储器在断电时将丢失其存储内容,故主要用于存储短时间使用的程序.ROM(Read-Only Memory)即 ...
- 039、Java中逻辑运算之普通与运算“&”
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...