Vue中的$set的使用实例代码


Posted in Javascript onOctober 08, 2018

Vue —$set

在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去;

当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

如下代码,给 student对象新增 age 属性

data () {
  return {
    student: {
      name: '',
      sex: ''
    }
  }
}
mounted () { // ——钩子函数,实例挂载之后
  this.student.age = 24
}

原因是:受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。

要处理这种情况,我们可以使用$set()方法,既可以新增属性,又可以触发视图更新。

但是,值得注意的是,网上一些资料写的$set()用法存在一些问题,导致在新接触这个方法的时候会走一些弯路!

错误写法:this.$set(key,value)(ps: 可能是vue1.0的写法)

mounted () {
  this.$set(this.student.age, 24)
}

正确写法:this.$set(this.data,”key”,value')

mounted () {
  this.$set(this.student,"age", 24)
}

总结

以上所述是小编给大家介绍的Vue中的$set的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js Form.elements[i]的使用实例
Nov 13 Javascript
jquery.post用法之type设置问题
Feb 24 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
Javascript闭包实例详解
Nov 29 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
javascript编写简易计算器
May 06 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
js常用正则表达式集锦
May 17 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 #Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 #Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 #Javascript
angularJs提交文本框数据到后台的方法
Oct 08 #Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 #Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 #Javascript
webpack之引入图片的实现及问题
Oct 08 #Javascript
You might like
php中实现记住密码自动登录的代码
2011/03/02 PHP
CI框架Session.php源码分析
2014/11/03 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
js 居中漂浮广告
2010/03/21 Javascript
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
Javascript缓存API
2016/06/14 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python中取整的几种方法小结
2017/01/06 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
Python实现点云投影到平面显示
2020/01/18 Python
python语言的优势是什么
2020/06/17 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
中药专业毕业自荐书范文
2014/02/08 职场文书
食品业务员岗位职责
2014/03/18 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL