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 相关文章推荐
学习ExtJS(二) Button常用方法
Oct 07 Javascript
js工具方法弹出蒙版
May 08 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
深入浅析javascript继承体系
Oct 23 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二分查找二种实现示例
2014/03/12 PHP
PHP生成压缩文件实例
2015/02/07 PHP
php里array_work用法实例分析
2015/07/13 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Python中replace方法实例分析
2014/08/20 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
python实现批量转换图片为黑白
2020/06/16 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
师范教师毕业鉴定
2014/01/13 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
投标承诺函范文
2015/01/21 职场文书
2015年资料员工作总结
2015/04/25 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL