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)之外的都是对象了,所以,不把对象学明白怎么继续往下学习呢? 一.概述 对象是一种复合值,它将很多值(原始 ...
随机推荐
- Mybatis框架模糊查询
一.ISmbmsUserDao层 //根据姓名模糊查询 public List<Smbms> getUser(); //多条件查询 public List<Smbms> get ...
- Hystrix熔断机制导致误报请求超时错误
问题的过程如下: (1)前端向服务端请求往HBase插入1000条数据: (2)请求经路由网关Zuul传递给HBaseService,HBaseService执行插入操作: (3)插入操作需要的时间超 ...
- Maven项目- get请求的乱码问题，使用tamcat7出现乱码的解决方法
get请求的乱码问题: 解决方法: 手动处理编码
- SpringMVC 转发、重定向
转发.重定向到其它业务方法 @org.springframework.stereotype.Controller @RequestMapping("/userController" ...
- 计算机网络中OSI参考模型
OSI参考模型 应用层 包括所有能产生网络流量的程序 DNS属于这一层 表示层 用来判断传输之前是否进行加密或压缩处理(二进制.ASCII) 比如出现乱码情况,可能就是表示层的问题 会话层 一个浏览器 ...
- arm linux 移植 python3.6
背景: 人生苦短,我用Python. 说明: 编译Python的嵌入式版需要解释器解析setup.py从而编译Python的模块,因此需要先编译出host的解释器.(有点像Go语言) Python : ...
- C++面试常见问题——15函数的值传递、指针传递、引用传递
函数的值传递.指针传递.引用传递 值传递 形参是实参的拷贝,该表形参的值并不会影响外部的实参.值传递是单向的(实参-->形参),参数的值只能传入,不能传出.当函数内部需要修改参数并且不影响调用者 ...
- Android的事件处理机制之基于监听的事件处理
无论是桌面应用还是手机应用程序,面对用户的使用,经常需要处理的便是用户的各种动作,也就是需要为用户动作提供响应,这种为用户动作提供响应的机制就是事件处理. 而Android为我们提供了两套强大的响应机 ...
- Http与Https协议规范
HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1.0的第 ...
- prepareBeanFactory方法源码跟踪
看这篇文章之前可以先了解之前的跟踪流程,https://www.jianshu.com/p/4934233f0ead 代码过宽,可以shift + 鼠标滚轮 左右滑动查看 AbstractApplic ...