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)之外的都是对象了,所以,不把对象学明白怎么继续往下学习呢? 一.概述 对象是一种复合值,它将很多值(原始 ...
随机推荐
- main.js index.html与app.vue三者关系详解
main.js index.html与app.vue三者关系详解 2019年01月23日 11:12:15 Pecodo 阅读数 186 main.js与index.html是nodejs的项目启 ...
- 百度统计数据导出demo的坑
1.用户名中文的问题 由于demo文件格式的问题,如果用户名使用中文的话,会出现一下问题 ----------------------preLogin---------------------- [ ...
- Java 变参函数的实现
Java的变参函数实现实际上参数是一个数组,其简单用法如下 public class variableParamTest { private static void variableParam(O ...
- JAVA虚拟机：Java技术体系讲解（一）
按照Java系统的功能划分为: 一.Java语言,即使用Java编程语言进行软件开发. 二.开发过程中使用的工具和API(API(Application Programming Interface,应 ...
- L1-046. 整除光棍（模拟除法）
题意: 这里所谓的“光棍”,并不是指单身汪啦~ 说的是全部由1组成的数字,比如1.11.111.1111等.传说任何一个光棍都能被一个不以5结尾的奇数整除.比如,111111就可以被13整除. 现在, ...
- HihoCoder 1245：王胖浩与三角形 三角形边长与面积
#1245 : 王胖浩与三角形 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 王胖浩有一个三角形,三边长为a,b,c.他有特殊的能力,能增加三条边的边长,增加的总长度不能 ...
- spoj694--Distinct Substrings
个人第一道后缀数组题目.对于每一个后缀suffix(i),都有len-sa[i]个前缀(也即有len-sa[i]个不同的字符串),其中与排名前一位的后缀有height[i]个共同的前缀,最后所得到的新 ...
- 微信公众号sdk
微信公众号开发 能享用微信公众号的API,比如分享给好友,分享到朋友圈,禁止菜单功能,选择图片,获取地址,以及支付 微信的功能有两种执行方式 一种是 wx.xx 一种是 WeixinJSBridge. ...
- java字符，字符串，数字之间的转换
string 和int之间的转换 string转换成int :Integer.valueOf("12") int转换成string : String.valueOf(12) ch ...
- 【SQL必知必会笔记(3)】SELECT语句的WHERE子句数据过滤操作
上个笔记主要介绍了利用SELECT语句检索单个/多个/所有列,并利用DISTINCT关键字检索具有唯一性的值.利用LIMIT/OFFSET子句限制结果:以及利用ORDER BY子句排序检索出的数据,主 ...