浅谈Vue中的$set的使用
在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去;
当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。如下代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue $set</title> <script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script> </head> <body> <div id="app"> 姓名:{{ name }}<br> 年龄:{{age}}<br> 性别:{{sex}}<br> 说明:{{info.content}} </div> <!-- JavaScript 代码需要放在尾部(指定的HTML元素之后) --> <script> var data = { name: "简书", age: '3', info: { content: 'my name is test' } } var key = 'content'; var vm = new Vue({ el:'#app', data: data, ready: function(){ //Vue.set(data,'sex', '男') //this.$set('info.'+key, 'what is this?'); } }); data.sex = '男'; </script> </body> </html>
运行结果:
姓名:简书 年龄:3 性别: 说明:my name is test
为什么会这样呢?当去查对应文档时,你会发现响应系统 ,把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter,如上示例,将data在控制台打印出来会发现:
在age及name都有get和set方法,但是在sex里面并没有这两个方法,因此,设置了sex值后vue并不会自动更新视图;
解决方法:
<script> var data = { name: "简书", age: '3', info: { content: 'my name is test' } } var key = 'content'; new Vue({ el:'#app', data: data, ready: function(){ Vue.set(data,'sex', '男'); this.$set('info.'+key, 'what is this?'); } }); </script>
1、通过Vue.set方法设置data属性,如上:
Vue.set(data,'sex', '男')
2、您还可以使用 vm.$set实例方法,这也是全局 Vue.set方法的别名:
var key = 'content'; //这种主要用于当对象中某个属性值动态生成时处理方式 this.$set('info.'+key, 'what is this?'); 或 this.$set('info.content', 'what is this?');
浅谈Vue中的$set的使用的更多相关文章
- 浅谈Vue中计算属性(computed)和方法(methods)的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- 浅谈Vue中Slot以及slot-scope
vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学 ...
- 浅谈Vue中计算属性computed的实现原理
虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...
- 浅谈Vue中的Prop
Prop 基本用法 Prop的基本用法很简单,只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可 Vue.component('child', { ... // 接收message p ...
- 浅谈vue中的计算属性和侦听属性
计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...
- 浅谈Vue.js
作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...
- 浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
- 【Vue】浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
- 浅谈Vue响应式(数组变异方法)
很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...
随机推荐
- 可视化缺失值的办法——R语言
在数据分析中,对缺失值的处理是很关键一步,一般用summary()函数 a<-c(,,,NA) B<-c("a","b","c" ...
- raft协议-分布式环境下的数据一致性问题
阅读了一个有意思的ppt,是Standford大学发表的raft协议 网址:http://thesecretlivesofdata.com/raft/ 下面自己总结下咯: 1.raft是一个实现了解决 ...
- Java Annotation 刷课笔记(一)
1.什么是注解? 1.1.Annotation是从JDK5.0引入的新技术 1.2.Annotation的作用: 不是程序本身,可以对程序作出解释(这一点,和注释没什么区别) 可以被其他程序(比如编译 ...
- vue-jwt 实战
作用:把用户的信息储存到客户端 每次客户端带上token 校验是否登陆过 1.使用主要有两个api jwt.sign(payload, secretOrPrivateKey, [options, ca ...
- luoguP1445 [Violet]樱花
链接P1445 [Violet]樱花 求方程 \(\frac {1}{X}+\frac {1}{Y}=\frac {1}{N!}\) 的正整数解的组数,其中\(N≤10^6\),模\(10^9+7\) ...
- oracle java for ubuntu apt-get
oracle java PPA: ppa:webupd8team/javathe key word use for search more infomation: webupd8team
- telnet ip 端口
telnet ip 端口 1.关闭防火墙, 2.配置防火墙,出入端规则
- 软件工程 in MSRA Code Search-第二次结对编程
重现基线模型 我们选择了 code2vec 模型进行复现.该模型由 Uri Alon 等作者于 2018 年提出. 模型思路: 从代码与普通语言相比的特殊性入手,首先,对于输入的代码段,作者考虑到尽管 ...
- Ubuntu 14.04 DNS 丢失 | 中文输入法配置 (转载)
1)彻底解决Ubuntu 14.04 重启后DNS配置丢失的问题: http://www.tuicool.com/articles/RVZn2y 2)Ubuntu 14.04中文输入法的安装 ht ...
- Socket网络通信编程(二)
1.Netty初步 2.HelloWorld 3.Netty核心技术之(TCP拆包和粘包问题) 4.Netty核心技术之(编解码技术) 5.Netty的UDP实现 6.Netty的WebSocket实 ...